html - Top navbar (under header) fixed on top of screen when scrolling -
when scrollbar on top browser displays:
html:
------------------------- | header | ------------------------- | navbar | ------------------------- | body | ------------------------- when scrollbar down browser displays:
html:
------------------------- | | | body | | | ------------------------- but i'd have:
------------------------- | navbar | ------------------------- | | | body | | | ------------------------- i tried with:
<div id="navbar">...</div> css:
#navbar { position:fixed; z-index:1; } but works if navbar on top position. have header on top...
demo
i have used image @ top instead of "header" mentioned in question.
this js have used make header(navbar in case) fixed.
var stickynavtop = $('#header').offset().top; $(window).scroll(function() { if ($(window).scrolltop() > stickynavtop) { $('#header').addclass('fixed'); } else { $('#header').removeclass('fixed'); } });
Comments
Post a Comment