jQuery Dokument Scroll nicht feuern

Question

Ich habe eine feste Navbar auf meiner Website, die ich versuche, Funktionen zu binden, sobald es einen bestimmten Punkt auf der Seite erreicht. Ich habe das schon dreimal auf drei Seiten erfolgreich gemacht, kann es aber nicht für das Leben von mir schaffen. Die Funktion wird in einem Fenster eingewickelt bereit, so weiß ich die Seite vollständig geladen ist - vollständig für zwei Tage stapfte ... Hier ist der Code:

jQuery:

function startchange() { 
$('#ajax-frame').imagesLoaded().done(function(instance) { 
    var scroll_start = 0; 
    var startchange = $('.startchange'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
     $(document).on('scroll', function() { 
      scroll_start = $(this).scrollTop(); 
      if (scroll_start > offset.top) { 
       $('nav').addClass('active'); 
       console.log("startchange working"); 
      } else { 
       $('nav').removeClass('active'); 
      }; 
     }); 
    } 
}); 
}; 

CSS:

body, 
html { 
height: 100% !important; 
width: 100%; 
margin: 0; 
padding: 0; 
overflow-x: hidden; 
} 

Vielen Dank für einen Einblick in dieses frustrierende Thema.

Answer 1

Ein schneller Ansatz, der das Problem lösen wird, ist zu entfernen: overflow-x: hidden; von Ihrem CSS. Demo: https://jsfiddle.net/mrlew/ce8me3qk/

Aber hier ist was passiert: Sie Einstellung body und html auf Höhe 100% und einer überlappt das andere (html Tag ist ein Block-Element auch). Sie setzen beide auf die Höhe: 100% und tatsächlich, was Sie scrollen, ist body, und nicht window/document.

Beweis: schaut sie an beiden Scrollbar, wenn overflow zu scroll Einstellung: https://jsfiddle.net/mrlew/ce8me3qk/8/ Beachten Sie, dass die inneren sind scrollen. Also, wenn Sie $("document").on('scroll', function() { zu ändern, wird es auch funktionieren.

Oder einfach htmlheight nicht auf 100% setzen.