Objets au-dessus de nav, mais nav doit être sur le dessus des objets

Question

J'ai écrit ce morceau de code de sorte que lorsqu'un utilisateur est sur mon site, la navigation les suivra pendant qu'ils défilent. Cela fonctionne très bien, mais il y a peu d'exemples où les objets flottent au-dessus de la navigation et ils seront cachés derrière eux. Voici un jsfiddle.

https://jsfiddle.net/b24fgsf3/

Vous remarquerez que vous faites défiler la navigation se mette en haut de la page à un certain point, mais la balise h1 est encore visible sur le dessus de la navigation, et il cache les options de nav brièvement . Assez agaçant, et je pense que c'est mauvais UX/UI. J'ai joué avec les positions et quelques autres propriétés, mais je n'arrive pas à le faire fonctionner correctement.

Toutes les suggestions seraient grandement appréciées.

Voici le jQuery que j'ai écrit. parce que je ne peux rien poster sans ça apparemment.

var num = 15; 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > num) { 
    $('nav').addClass('fixed'); 
} else { 
    $('nav').removeClass('fixed'); 
} 
}); 

Answer 1

Ajouter au z-index: 1nav-pile sur haut du container - voir la démo ci-dessous:

var num = 35; 
 

 
$(window).bind('scroll', function() { 
 
    if ($(window).scrollTop() > num) { 
 
     $('nav').addClass('fixed'); 
 
    } else { 
 
     $('nav').removeClass('fixed'); 
 
    } 
 
});

nav { 
 
    background-color: white; 
 
    height: 75px; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    clear: both; 
 
} 
 

 
.hero { 
 
    height: 200px; 
 
} 
 

 
.hero h1 { 
 
    position: relative; 
 
    top: 50px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 2em; 
 
    background-color: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li>Blah</li> 
 
    <li>Blah</li> 
 
    </ul> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="hero"> 
 
    <h1> 
 
    Blah Blah Blah 
 
    </h1> 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum. 
 
    
 
    Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat. 
 

 
    </p> 
 
</div>

Answer 2

SUGGESTION: vous n'avez pas besoin d'utiliser javascript.

vous pouvez simplement utiliser position: fixed; sur le fichier css.

et de faire le z-index une grande valeur comme: 99999 pour venir au-dessus de tous les autres éléments.

vous devez placer la div 'container', dans le bas de la barre de navigation.

simplement, utilisez la position relative pour les éléments 'container'.

nav { 
    position: fixed; 
    background-color: white; 
    height: 75px; 
    width: 100%; 
    z-index: 99999; 
} 

.container{ 
    position: relative; 
    top: 75px; 
} 

il suivra les utilisateurs en faisant défiler:

nav { 
 
    position: fixed; 
 
    top: 0; 
 
    background-color: black; 
 
    color:white; 
 
    height: 50px; 
 
    width: 100%; 
 
    z-index: 99999; 
 
} 
 

 
.container{ 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
    
 
nav li{ 
 
    display:inline; 
 
} 
 

 
.hero { 
 
    height: 200px; 
 
} 
 

 
.hero h1 { 
 
    position: relative; 
 
    top: 50px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 2em; 
 
    background-color: yellowgreen; 
 
    color: white; 
 
}

<nav> 
 
    <ul> 
 
    <li>Blah</li> 
 
    <li>Blah</li> 
 
    </ul> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="hero"> 
 
    <h1> 
 
    Blah Blah Blah 
 
    </h1> 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum. 
 
    
 
    Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat. 
 

 
    </p> 
 
    
 
    <p> 
 
    Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum. 
 
    
 
    Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras te 
 
</div>