Question

我有这个稍微复杂的代码。本质上，一旦用户向下滚动超过某个div的高度，它就会将对象的显示设置为none，更改一些CSS选择器并淡化元素。当用户向上滚动超过相同高度时，else语句应该处理，该项应淡出，更改CSS选择器，然后通过将显示更改为可见选项重新显示。这样做的原因是因为它将元素从静态更改为固定。滚动浏览视口上无法再看到的静态元素后，它将设置为display：none;并固定，以便它可以作为视口上的固定元素淡入。反之亦然。问题是，每次我在指定高度上滚动时都会触发onscroll事件，导致事件每滚动一次都会闪烁。我想要的是，每个事件只能在指定的滚动高度超过一次时触发一次，对于任一方向。那可能吗？

(function($) {          
    $(document).ready(function(){   

        $(window).off().scroll(function(){

            if ($(this).scrollTop() > $("#carousel").outerHeight()) {

                $("#nav").css("display", "none");
                ...modifying css, etc etc
                $('#nav').fadeIn(500);

            } else {

                $('#nav').fadeOut(500); 
                ...modifying css, etc etc
                $("#nav").css("display", "static");

        }
    });
});

})(jQuery);

Answer 1

            if ($(this).scrollTop() > $("#carousel").outerHeight()) && $("#nav").hasClass("topclass")) {

                $("#nav").css("display", "none");
                ...modifying css, etc etc
                $('#nav').fadeIn(500);

            } else if ($(this).scrollTop() < $("#carousel").outerHeight() &&    $("#nav").hasClass("bottomclass")) {

                $('#nav').fadeOut(500); 
                ...modifying css, etc etc
                $("#nav").css("display", "static");

            }

这是一个解决方案 - 它不使用特殊事件绑定或任何东西，但通过检查是否已经设置了类来完成工作，因此没有理由多次触发事件。

Jquery触发器滚动事件

1 个答案: