Comment puis-je faire apparaître la barre de navigation et la verrouiller après avoir fait défiler 50px vers le bas?

Je suis en train de faire un site web de style page unique et après avoir fait défiler 1 px a été défilé (alias la page d'accueil a été passée) Je veux que la barre de navigation apparaisse et reste fixe en haut. J'ai essayé le .scroll() jquery et je n'ai pas eu de chance.Comment puis-je faire apparaître la barre de navigation et la verrouiller après avoir fait défiler 50px vers le bas?

Merci pour toute contribution utile !!!!

HTML:

<div id="navbar"> 
     <div id="nav-container"> 
      <img id="logonavbar" src="#"> 
      <a id="ABTUS" href="#">ABOUT US</a> 
      <a id="SRVCS" href="#">SERVICES</a> 
      <a id="PRTFLO" href="#">PORTFOLIO</a> 
      <a id="CNTCT" href="#">CONTACT</a> 

     </div> 
    </div>

CSS:

#navbar { 
    width: 100%; 
    background-color: white; 
    overflow: auto; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    border-bottom: solid; 
    border-width: 1px; 
    border-color: #afafaf; 
    overflow: hidden; 
    z-index: 10; 
    display: none; 
} 

#nav-container { 
    max-width: 1200px; 
    min-width: 700px; 
    margin: 0 auto; 


} 

#logonavbar { 
    float: left; 
    margin: 0 auto; 
    width: 125px; 
    padding: 10px 0 0 0; 

} 

#nav-container a { 
    float: right; 
    display: block; 
    padding: 25px 15px; 
    text-decoration: none; 
    color: black; 
    font-family: "calibri light", calibri,sans-serif; 
    font-size: 20px; 
    transition: background-color 0.5s ease; 

} 

#nav-container a:hover { 
    background-color: #f4f4f4; 
    transition: background-color 0.5s ease; 
} 

#nav-container a:active { 
    background-color: #bfbfbf; 
} 

#nav-container h1:hover { 
    color: #aaaaaa; 
    transition: color 0.3s ease; 
}

JQUERY:

$(document).scroll(function() { 
    if ($document.scrollTop() >= 50) { 
    $('#nav-container').css('display': 'inline', 'position': 'fixed'); 
    } 
});

Source

2017-09-17 AbuN2286

Ici, j'ai fait un exemple simple d'un élément qui colle au haut de la page après vous faites défiler dessus. Peut-être que ça peut vous aider aussi!

http://corexsystems.net/2017/09/08/simple-sticky-menu-in-jquery-css3/

est ici la source de cet exemple!

<html> 
    <head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"> 
    <script> 
     $(function(){ 
     var pos = $("#topMenuX").offset().top, 
     win = $(window); 
     win.on("scroll", function() { 
      win.scrollTop() >= pos ? $("#topMenuX").addClass("fixed") : $("#topMenuX").removeClass("fixed");  
     });  
     }); 
    </script> 
    <style> 
     body { 
     padding:0; 
     margin:0px; 
     } 
     #topMenuX { 
     background: #666; 
     padding: 20px; 
     height:45px; 
     color: #fff; 
     } 
     #topMenuX .insideMenu li { 
     float:left; 
     list-style:none; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="topMenuX"> 
     <ul class="insideMenu"> 
     <li>CoreXDesigns</li> 
     <li>Simple Sticky Menu Example</li> 
     </ul> 
    </div> 
    </body> 
</html>

Source

2017-09-17 21:09:38

Veuillez accepter la réponse si elle est correcte! Merci :) –

Veuillez accepter la réponse si elle est correcte! –

Comment puis-je faire apparaître la barre de navigation et la verrouiller après avoir fait défiler 50px vers le bas?

Répondre

Questions connexes