When setting menu at the top after scroll, everything that is below moves

Question

When setting menu at the top after scroll, everything that is below moves

Navigation

#1 by (0 votes)

0

Oops, first I'll explain what I'll do.

I want to scroll and go through my menu, it stays on top . My website will have the menu in this style SITE EXAMPLE , an initial part that in my case occupies 100% of the screen (it is set to 100% height in css), and only then comes the menu.

So, for me to make it possible, I took the example of another question and put it 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 "nav-container" class in the session that encompasses all my menu, in case a < nav >.

However, the following errors occur:

As the height to set the menu is set to pixels in the case of 750 that appears in the JS code, and my home screen is set to% (100%) when I raise the screen or place to expand the browser, the position that the fixed menu changes place, does not stay exactly when it passes through it.

And another mistake is happening, when the menu is fixed, 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. / p>

Does anyone know how I can fix these errors?

javascript html jquery css

asked by anonymous 10.11.2017 / 00:49

1 answer

Is it wrong to write byte of images in the database? Indexes of tuples in a list - python

score 0 · Accepted Answer

One solution to this is to make a control of margin-top of div below the menu. The code below does this. It sets the menu when the div previous exits the screen and adds an upper margin of the same menu height to the div below the menu, and does the opposite process also, when the div before the menu returns to the screen with 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><divstyle="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 />