scroll - Floating menu bars sticks to top when scrolling up, the one replaces the other jquery -
the other day found javascript code, , i'm not @ javascript need help. issue make website kind of instagram app. have made example pictures.
http://i.imgur.com/tidi2ct.jpg
imagine picture left first, middle second, , right third.
at website have top logo, , when header 1 reaches top stays @ top. found code this, need when scroll, header 2 pushes header 1 away or moves in front of header 1.
this code found, doesn't work when have more 1 bars should fixed @ top when reaches top.
thanks
$(window).scroll(function(e) var scroller_anchor = $(".scroller_anchor").offset().top; if ($(this).scrolltop() >= scroller_anchor && $('.scroller').css('position') != 'fixed') { $('.scroller').css({ 'background': 'white', 'position': 'fixed', 'top': '0px' }); $('.scroller_anchor').css('height', '50px'); } else if ($(this).scrolltop() < scroller_anchor && $('.scroller').css('position') != 'relative') { $('.scroller_anchor').css('height', '0px'); $('.scroller').css({ 'background': 'white', 'position': 'relative' }); } });
i think problem each menu bar has have it's top offset tracked separately.
here simple solution believe @ least similar you're looking for:
the code:
jquery
$(document).ready(function(e) { var menutop1pos = $('#menutop1').offset().top; var menutop2pos = $('#menutop2').offset().top; var sticktotop = function(){ var winscrolltop = $(window).scrolltop(); if (winscrolltop >= menutop1pos) { $('#menutop1').addclass('sticktop1st'); } else { $('#menutop1').removeclass('sticktop1st'); } if (winscrolltop >= menutop2pos) { $('#menutop2').addclass('sticktop2nd'); } else { $('#menutop2').removeclass('sticktop2nd'); } }; sticktotop(); $(window).scroll(function() { sticktotop(); }); });
css
.sticktop1st { position:fixed; top:0px; z-index:998; background-color:white; } .sticktop2nd { position:fixed; top:0px; z-index:999; background-color:white; }
Comments
Post a Comment