ilovevb247
New Member
hi all i want to have a floating topbar on the top of my page and be visiable even if i scroll down the page. I tried to achieve this using following code but for some reason it doesn't work! After trying to troubleshoot i noticed that $(document).ready(function() never becomes true! could you guys help me what is wrong here ?floating topbar:\[code\]<div class="FlyingTopBar"> <div class="GlobalNav"> <div class="Content"> <span class="Line"></span> <a class="Active" href="http://stackoverflow.com/" title="Home">Home</a> <span class="Line"></span> <a href="http://stackoverflow.com/link1.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link2.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link3.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link4.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link5.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link6.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link7.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link8.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link9.html" title="Link">Link</a> <span class="Line"></span> <a href="http://stackoverflow.com/link10.html" title="Link">Link</a> <span class="Line"></span> <div class="BottomFix"></div> </div> </div> </div> \[/code\]javascript to hold the floating tobar on the top while scrolling down:\[code\]<script type="text/javascript"> /*<![CDATA[*/ alert('start'); var $flying_bar = $('div.FlyingTopBar'); var amount_scrolled; var initial_top_position =0; var actual_top_position; $(document).ready(function() { updateCurrentPosition(); alert('visable topbar1'); $flying_bar.css('visibility','visible'); alert('visable topbar2'); $(window).bind('scroll', updateCurrentPosition); }) function updateCurrentPosition() { amount_scrolled = $window.scrollTop(); if (amount_scrolled < 0) amount_scrolled = 0; //not tested iPad reversed scroll fix if (amount_scrolled < initial_top_position) { actual_top_position = initial_top_position - amount_scrolled; $flying_bar.css({'top':actual_top_position + 'px'}); } else { $flying_bar.css({'top':'0px'}); } } headerTickerInit('div.ReportTitleTicker'); if( $('#ScrollPollSection').length > 0 ) { $('#SideNavPolls').show(0); } /*]]>*/ </script>\[/code\]part of css:\[code\].FlyingTopBar {z-index:20; position:fixed; top:120px; left:0px; width:100%; visibility:hidden;} /* <- top updated by JS */ \[/code\]