Kann ich meine Navigationsleiste nicht erreichen, nachdem ich über den Header gescrollt habe?

Question

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
     var distanceFromTop = $('#sticky_menue').scrollTop(); 
 
     if (distanceFromTop >= $('#header').height()) 
 
     { 
 
      $('#sticky_menue').addClass('fixed'); 
 
     } 
 
     else 
 
     { 
 
      $('#sticky_menue').removeClass('fixed'); 
 
     } 
 
    }); 
 
});

#sticky.fixed { 
 
    display: block; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%;

<!-- Nav Bar --> 
 
    <div id="sticky_menue"> 
 
    <div id="nav_bar"> 
 
     <div id="logo_nav"> Logo </div> 
 
     <ul> 
 
     <li><a href="link">Home</a></li> 
 
     <li><a href="link">Portfolio</a></li> 
 
     <li><a href="link">Social</a></li> 
 
     <li><a href="link">About</a></li> 
 
     <li><a href="link">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div>

Hier ist mein Code: https://jsfiddle.net/32atL9pc/

Ich versuche, die Navigationsleiste zu bekommen, um die Spitze zu halten Sie sich an, nachdem ich letzte Header blättern? Hier

Answer 1

ist eine Lösung, mit nativen js:

CSS Ergänzungen und Änderungen:

html, body { 
    margin: 0; 
    padding: 0; 
} 
* { 
    box-sizing: border-box; 
} 
#sticky_menue { 
    background: #fff; 
    width: 100%; 
    height: 60px; 
} 
#sticky_menue.normal{ 
    position:relative; 
} 
#sticky_menue.fixed { 
    display: block; 
    position: fixed; 
    top: 0px; 
} 

JS:

window.addEventListener('scroll', function() { 

    var contentDiv = document.getElementById('content_area'); 
    var navDiv = document.getElementById('sticky_menue'); 
    var navDivHeight = navDiv.offsetHeight; 
    var distance = contentDiv.getBoundingClientRect().top; 

    if (distance <= navDivHeight) { 
     navDiv.classList.replace('normal', 'fixed'); 
    } 
    else if (distance > navDivHeight) { 
     navDiv.classList.replace('fixed', 'normal'); 
    } 
}); 

https://jsfiddle.net/32atL9pc/16/

Answer 2

Ihre CSS bieten eine Klasse für # sticky.fixed, die nie erfüllt wird.

Versuchen .fixed oder # sticky_menue.fixed