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

一种能够解决问题的快速方法是从您的CSS中删除overflow-x: hidden;。演示：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() {，它也会有效。

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

jquery文档滚动没有触发

1 个答案: