Shopify javascript/jQuery scrollTop 无法正常工作的条件

Question

我正在设置 javascript/jQuery 条件，以便在用户单击按钮 ("Buy Now") 时仅在他们看不到 header 时才使 header 下拉]（向下 200 像素）。我的问题是，当用户滚动超过 200 像素时，即使他们向上滚动，代码仍然会执行。这是我的代码，谢谢。

$(function() {
$(document).scroll(function() {
    var y = $(window).scrollTop();
    console.log(y);

    if (y >= 200) {
        $('.product__add-to-cart-button').click(function() {
            // your statements;
            $(".site-header").addClass("site-header--fixedd").removeClass("site-header--transparent");
            $("#crazy-pineapple, #coco-twist, #crunchy-joy, #nutty-chia").css('margin-top', 143);
            setTimeout(function() {
                $(".site-header__cart-bubble").removeClass("bubblenormal").addClass("bubblevisible");

            }, 300);
            setTimeout(function() {
                $(".site-header__cart-bubble").removeClass("bubblevisible").addClass("bubblenormal");
            }, 700);
            setTimeout(function() {
                $(".site-header").removeClass("site-header--fixedd");
                $(".site-header").addClass("site-header--fixeddd");
            }, 1200);
            setTimeout(function() {
                $("#crazy-pineapple, #coco-twist, #crunchy-joy, #nutty-chia").css('margin-top', 0);
                $(".site-header").addClass("site-header--transparent");
                $(".site-header").removeClass("site-header--fixedd");
                $(".site-header").removeClass("site-header--fixeddd");
            }, 1600);
        });
    }
});

});

Answer 1

你的代码中有几个大的 NO。

您应该永远在scroll/resize函数中添加事件处理程序！为什么？因为一旦你做了 resizing/scrolling.

你就一直在堆叠它们

目前您将 click 事件应用到 .product__add-to-cart-button，我认为您不需要。

此外，您的 scroll 活动目前没有任何意义。如果 scrollTop() 大于 200，你可以在点击事件中创建一个 if 语句，你可以一起删除滚动事件。

此外，如果你打算多次使用它们，你必须养成缓存对象的习惯。必须缓存任何多次使用的对象。

如果我们考虑到上述所有评论，您的代码应该是这样的：

$(function() {
    var $win = $(window);
    var $siteHeader = $(".site-header");
    var $siteHeaderCartBuble = $(".site-header__cart-bubble");
    var $group = $("#crazy-pineapple, #coco-twist, #crunchy-joy, #nutty-chia");

    $('.product__add-to-cart-button').on('click',function() {
        if ($win.scrollTop() <= 200) {
            return false
        };

        $siteHeader
            .addClass("site-header--fixedd")
            .removeClass("site-header--transparent");

        $group.css('margin-top', 143);

        setTimeout(function() {
            $siteHeaderCartBuble
                .removeClass("bubblenormal")
                .addClass("bubblevisible");
        }, 300);
        setTimeout(function() {
            $siteHeaderCartBuble
                .removeClass("bubblevisible")
                .addClass("bubblenormal");
        }, 700);
        setTimeout(function() {
            $siteHeader
                .removeClass("site-header--fixedd")
                .addClass("site-header--fixeddd");
        }, 1200);
        setTimeout(function() {
            $group.css('margin-top', 0);
            $siteHeader
                .addClass("site-header--transparent")
                .removeClass("site-header--fixedd")
                .removeClass("site-header--fixeddd");
        }, 1600);
    });
})

Shopify javascript/jQuery scrollTop 无法正常工作的条件

Shopify javascript/jQuery condition for scrollTop not working

javascript

jquery

shopify