jquery - Trouble with positioning of element with javascript -
i'm trying achieve navigation bar "catched" user scrolls it. semi achieving goal current attempt moving main content scroll not want achieve. here's have https://jsfiddle.net/abp1rwhp/
$(function(){ var navheight = $('#nav-bar').offset().top; console.log(navheight) $(window).on('scroll', function() { if(screen.width < 980) { } if($(window).scrolltop() > navheight){ $('#nav-bar').css({ 'top': $(window).scrolltop() > 0 ? '0px' : '0px', 'position': 'fixed' }) } if($(window).scrolltop() < navheight){ $('#nav-bar').css({ 'top': '', 'position': 'relative' }) } }); })
as can see content section moves down (i think 40px) when scroll, how go fixing issue?
because nav-bar relative, pushes down contents section. when give position fixed, section goes up, because nav-bar no longer uses space in page.
to combat this, give section margin-top of 40px, when give nav-bar position relative, that 40px space kept.
Comments
Post a Comment