javascript - How to hold floating topbar when scrolling down the page? -
hi want have floating topbar on top of page , visiable if scroll down page. tried achieve using following code reason doesn't work! after trying troubleshoot noticed $(document).ready(function() never becomes true! guys me wrong here ?
floating topbar:
<div class="flyingtopbar"> <div class="globalnav"> <div class="content"> <span class="line"></span> <a class="active" href="/" title="home">home</a> <span class="line"></span> <a href="/link1.html" title="link">link</a> <span class="line"></span> <a href="/link2.html" title="link">link</a> <span class="line"></span> <a href="/link3.html" title="link">link</a> <span class="line"></span> <a href="/link4.html" title="link">link</a> <span class="line"></span> <a href="/link5.html" title="link">link</a> <span class="line"></span> <a href="/link6.html" title="link">link</a> <span class="line"></span> <a href="/link7.html" title="link">link</a> <span class="line"></span> <a href="/link8.html" title="link">link</a> <span class="line"></span> <a href="/link9.html" title="link">link</a> <span class="line"></span> <a href="/link10.html" title="link">link</a> <span class="line"></span> <div class="bottomfix"></div> </div> </div> </div> javascript hold floating tobar on top while scrolling down:
<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> part of css:
.flyingtopbar {z-index:20; position:fixed; top:120px; left:0px; width:100%; visibility:hidden;} /* <- top updated js */
add flyingtopbar class, there no need of using javascript in such cases :-
. flyingtopbar { position : fixed; top: 0px; width:100%; z-index:20; } to read more fixed positioning, go through : http://www.w3schools.com/cssref/pr_class_position.asp
i hope helps. :-) cheers!
Comments
Post a Comment