jquery document scroll not firing

Question

У меня есть фиксированный навигатор на моем сайте, который я пытаюсь связать с функциями, когда он достигает определенной точки на странице. Я делал это успешно три раза раньше на трех сайтах, но не мог на всю жизнь заставить его работать над этим. Функция заворачивают в окне готова, так что я знаю, страница полностью загружена - полностью озадачен в течение двух дней ... Вот код:

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; 
} 

Спасибо за любое понимание этой неутешительной проблемы.

Answer 1

Один быстрый подход, который позволит решить проблему: overflow-x: hidden; из вашего css. Демонстрация: https://jsfiddle.net/mrlew/ce8me3qk/

Но вот , что происходит: вы устанавливаете body и html до высоты 100%, и один перекрывают другие (html тег является блочным элементом тоже). Вы устанавливаете обе высоты: 100%, а на самом деле прокрутка - body, а не window/document.

Доказательство: смотреть как скроллинг там при установке overflow в scroll: https://jsfiddle.net/mrlew/ce8me3qk/8/ Обратите внимания, что вы прокрутку внутренних один. Итак, если вы измените $("document").on('scroll', function() { на $("body").on('scroll', function() {, он тоже будет работать.

Или просто не устанавливайте htmlheight до 100%.