Question

我在我的网站上做了一个绝对定位的导航。

我做了一个课程，将其固定在屏幕顶部。

我想要找出的是如何在窗口滚动x页面下的像素数量后执行一个函数（在这个例子中为toggleClass）（在这种情况下为500像素）

Answer 1

程序是：

收听滚动事件以在滚动时检测用户的滚动位置
从页面顶部计算元素的位置，或者确定距页面顶部的固定距离（在您的示例中为500px）
当滚动位置大于触发位置时，执行该功能。如果您只想触发一次该函数，请删除函数中的滚动侦听器。

假设jQuery，就像这样：

$(window).on('scroll', function() {
    scrollPosition = $(this).scrollTop();
    if (scrollPosition >= 500) {
        // If the function is only supposed to fire once
        $(this).off('scroll');

        // Other function stuff here...
    }
});

Answer 2

可能是这样的：

$(window).scroll(function() {   // bind an eventhandler, if user scrolls
    if(window.scrollY > 500) {  // get amount of pixels - verticalScroll and check whether its higher 500
        /* ...*/
    }
});

Answer 3

$(window).scroll(function() {
    if ($(this).scrollTop() >= 500) {
        //custom code
    }
});

jquery - 滚动超过x像素后执行功能

3 个答案: