When pinning menu at the top after scroll, everything below moves

Question

Whoa, guys, first I’ll explain what I’m gonna do.

I want you to when using scroll and going through my menu, it gets fixed at the top. My site will have the menu in this style EXAMPLE SITE, an initial part which in my case 100% of the screen (is set to 100% height in css), and only then comes the menu.

So in order for me to make this possible, I took the example of another question and put this in my code.

jQuery("document").ready(function($){

var nav = $('.nav-container');

$(window).scroll(function () {
    if ($(this).scrollTop() > 750) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
});

In css I put:

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}

And in html, I put the class "Nav-container" in the session that encompasses my entire menu, in case a < Nav >.

However, the following errors occur:

As the height to fix the menu is set in pixels in case the 750 that is in the JS code, and my home screen is set in % (100%) when I increase the screen or put to expand the browser, the position that the fixed menu changes places, not exactly when it passes by .

And another error is happening, when the fixed menu, everything below it moves about 30 pixels up, it’s as if the menu when it’s fixed frees up space for the content to go up, and it’s getting ugly.

Does anyone know how to correct these mistakes?

Answer 1

One solution to this is to do a control margin-top of div below the menu. The code below does this. It fixes the menu when the div exits the screen and adds an upper margin of the same menu height to the div below the menu, and does the opposite process as well, when the div before the menu back to the screen with the scroll:

$(window).on('scroll load', function(){
   var win_scl = $(window).scrollTop(); // valor do scroll da janela
   var nav = $('.nav-container'); // menu
   var nav_ant = nav.prev('div'); // div antes do menu
   var nav_hgt = nav.outerHeight(); // altura do menu
   var nav_ant_hgt = nav_ant.outerHeight(); // altura da div antes do menu
   var nav_ant_top = nav_ant.offset().top; // distância da div antes do menu ao topo
   var nav_ant_dst = nav_ant_top-win_scl; // distancia do final da div antes do menu ao topo da janela

   if(nav_ant_dst <= nav_ant_hgt && win_scl > nav_ant_hgt) {
      nav.addClass("f-nav");
       // adiciono margem superior à primeira div depois do menu
      $(".nav-container+section").css('margin-top',nav_hgt+'px');
   }else{
      nav.removeClass("f-nav");
       // retiro margem superior à primeira div depois do menu
      $(".nav-container+section").css('margin-top','0');
   }
});

html, body{ margin: 0; padding: 0; height: 100%; }
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
.nav-container{
   display: block; width: 100%; height: 50px; background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: block; width: 100%; height: 100%; background: black; color: white;">
   Role para baixo
</div>
<div class="nav-container">
   menu
</div>
<section style="display: block; width: 100%; background: gray; position: relative;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla ornare vehicula. Quisque sit amet placerat mauris. Cras sed risus luctus, gravida tortor id, tristique felis. Nam nisl nisl, semper viverra augue a, tempus feugiat tellus. Quisque in justo volutpat felis finibus euismod. Quisque ullamcorper vel ipsum vel porta. In tortor lacus, sagittis et erat et, semper venenatis odio. Sed feugiat mollis ornare. Sed iaculis eros lacus, nec efficitur elit suscipit at. Vivamus ullamcorper volutpat gravida. Vestibulum accumsan vehicula felis, vel gravida mauris consectetur quis.
</section>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />