How To Stop Content Jumping Up Behind Fixed Nav Using Jquery

Once I scroll down the nav becomes fixed which is great but then the content jumps behind it. The height of the nav will be changing as the browser window gets smaller on the actua

Solution 1:

If you mean the scrollbar could cover the fixed element, then you'd better choose to layout with flexbox.

Fixed element must be covered by scrollbar

Solution 2:

I tested the below code on your codepen demo:

jQuery(document).ready(function() {
    var navOffset = jQuery('nav').offset().top;

    jQuery(window).scroll(function(){
        var scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset){
            jQuery("nav").addClass("fixed");
          var navHeight = jQuery("nav").height();
          jQuery("section").css({"margin-top" : navHeight});
        } else{
            jQuery("nav").removeClass("fixed");
          jQuery("section").css({"margin-top" : 0});
        }
    });
});

It works on your demo. I hope it solves the issue.