javascript - jquery文档滚动不触发

Question

我的网站上有一个固定的导航栏，一旦它到达页面上的某个点，我就会尝试将其绑定(bind)到该导航栏上。我之前在三个网站上成功完成过三次，但我终其一生都无法让它在这个网站上运行。该函数包装在一个准备就绪的窗口中，所以我知道该页面已完全加载 - 完全难住了两天......代码如下:

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

解决此问题的一种快速方法是从您的 css 中删除:overflow-x: hidden;。演示:https://jsfiddle.net/mrlew/ce8me3qk/

但这是正在发生的事情:您正在将 body 和 html 设置为 100% 高度，其中一个与另一个重叠(html 标签也是 block 元素)。您将两者都设置为 height: 100%，实际上您滚动的是 body，而不是 window/document。

证明:在将 overflow 设置为 scroll 时查看两个滚动条:https://jsfiddle.net/mrlew/ce8me3qk/8/请注意，您正在滚动内部。因此，如果您将 $("document").on('scroll', function() { 更改为 $("body").on('scroll', function() { ，它也会起作用。

或者，不要将 html height 设置为 100%。