Question

我有这个函数用于数字计数器，在屏幕上开始计数，这是有效的，但是当我滚动和计数器启动时，当我返回jquery删除固定导航类不会工作，并且导航贴在屏幕上方。当我删除此代码进行滚动时，粘性导航工作正常。

function isScrolledIntoView(elem) {
        var $elem = $(elem);
        var $window = $(window);

        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();

        var elemTop = $elem.offset().top;
        var elemBottom = elemTop + $elem.height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    $(window).on('scroll', function() {
        if (isScrolledIntoView('#counter')) {
            $('.number-count').countTo();
            $(window).off('scroll');
        }
    });

这是粘性导航的jquery代码

$(document).ready(function(){

            var navOffset = $(".nav").offset().top;
                $(".nav").wrap('<div class="nav-placeholder"></div>');
                $(".nav-placeholder").height($(".nav").outerHeight());

            $(window).scroll(function(){
            var scrollPos = $(window).scrollTop();

            if (scrollPos >= navOffset) {
                $(".nav").addClass("fixed");
            }   else {
                    $(".nav").removeClass("fixed");
                } 
            });
        });

以下是youtube链接，如果我没有解释好，你可以看到问题

https://youtu.be/_aX0dWl6ZfQ

Answer 1

如果我理解正确，你的$(window).off('scroll')行应该只删除它所包含的处理程序。尝试接受处理程序中的事件并将其传递给.off：

$(window).on('scroll', function(e) {
    if (isScrolledIntoView('#counter')) {
        $('.number-count').countTo();
        $(window).off(e);
    }
});

这样你也不会删除粘贴标题的处理程序

isScrolledIntoView函数不会删除固定导航栏的类

1 个答案: