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

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -