Question

目前我们已经实现了自定义scrollspy，因为我们无法使Bootstraps scrollspy正常工作。 scrollspy：

$(window).scroll(function () {
        var scroll = $(window).scrollTop(),
            /*offsets = hashes.forEach(function (hash) {
             return $(hash).offset().top;
             }),*/
            last;
        if (window.location.pathname === "/") {
            if (scroll >= 20) {
                $(".arrow").addClass("hidden");
            } else {
                $(".arrow").removeClass("hidden");
            }
            hashes.forEach(function (hash) {
                if (hash === "#contact") {
                    if ($(hash).offset().top - navheight - 10 < scroll + 200) {
                        last = hash;
                    }
                } else if ($(hash).offset().top - navheight - 10 < scroll) {
                    last = hash;
                }
            });

            hashes.forEach(function (hash) {
                if (scroll >= ($(".notfooter").outerHeight() - 60 - $("#contact").outerHeight() - ($("#partners").outerHeight() / 2))) {
                    $('li:has(a[href="#contact"])').addClass("testing");
                    $('li:has(a[href="#partners"])').removeClass("testing");
                } else {
                    if (hash !== last) {
                        //console.log(hash + " not last hash");
                        $('li:has(a[href="' + hash + '"])').removeClass("testing");
                    } else if (hash === last) {
                        $('li:has(a[href="' + hash + '"])').addClass("testing");
                    }
                }
            });
        }
    });

哈希数组只是一个包含所有锚链接的数组。

然后我们有一个名为scrollto的类，我们将一个click事件绑定到该类，然后将窗口滚动到相应的div。

$(".scrollto").on('click', function (event) {
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        if (window.location.pathname !== "/") {
            $.get("/indexcontent", function (data) {
                    $("#bodycontent").html(data);
                    history.pushState(null, null, "/");
                    $('body').stop().animate({
                        scrollTop: $(hash).offset().top - navheight
                    }, 800, function () {
                        history.pushState(null, null, "");
                    });
                }
            );
        } else {
            $('body').stop().animate({
                scrollTop: $(hash).offset().top - navheight
            }, 800, function () {
                history.pushState(null, null, "");
            });
        }
    }
});

单击链接时，它将首先标记为活动（名为testing的类），然后我们将开始滚动到该div。这就是出现问题的地方，因为我们一旦开始滚动$(window).scroll()事件触发器，就会从我们点击的链接中删除testing，然后在我们通过时继续添加和删除链接他们向下滚动页面。

我认为我可以做的是在scrollto点击事件开始时取消绑定滚动事件，然后在滚动完成后重新绑定它，但即使我在{{的回调中这样做了1}}它仍然会说完成并在滚动实际完成之前将其绑定。

那么在尝试实现这个时我该怎么想？我的理由是关于正确方向的绑定/解绑技巧吗？

Answer 1

解决方案可能是.on和.off滚动事件处理程序。您可以在点击处理程序的开头和.on之后，在点击处理程序滚动动画结束后，使用保证或回调。

是的我是指bind（jQuery .on（））和unbind（jQuery .off（））。

单击锚链接时如何忽略滚动但是否会听滚动？

1 个答案: