javascript - Keep navbar at top of page when scrolled to correct position -


so website have header. @ top of header have logo , slogan, , beneath have nav bar. when user scrolls down want top part of header (logo , slogan) disappear whereas nav bar should stay fixed. know need position:fixed; added how activate when it's in right place. i've worked bit media queries before. there 1 y-scroll?

thanks

you'll need use javascript here in order subscribe window.onscroll event.

window.onscroll = function(){     if(window.pageyoffset > 100/*px*/)         $('.nav').addclass('fixed_bar');     else         $('.nav').removeclass('fixed_bar'); } 

and css .fixed_bar this:

.fixed_bar{     position:fixed;     top:0;     z-index:10000; } .fixed_bar .logo{     display:none; } 

also, you'll have account space fixed nav free , add padding or margin beneath element;


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -