Shopify javascript/jQuery condition for scrollTop 不起作用

Question

我正在制作一个javascript/jQuery条件，以便在用户单击按钮("立即购买"(后，仅在用户看不到标题(向下200px(时使标题下拉。我的问题是，当用户滚动超过 200px 时，即使他们向上滚动，代码仍然会执行。这是我的代码，谢谢。

$(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。

你永远不应该在滚动/调整大小函数中添加事件处理程序！为什么？因为一旦您进行调整大小/滚动，您就会继续堆叠它们。

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

此外，您目前scroll活动没有意义。如果 scrollTop(( 大于 200，您可以在 click 事件中创建一个 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);
    });
})