Question

我的朋友在主题森林为其商店购买了一个主题，并且据我对CSS和HTML的一点了解，他要求我对该主题进行自定义改进。他问我的一件事是“ Sticky Add to Cart标题”在滚动确定数量的像素后固定显示在页面顶部，这晚于现在显示。我对如何在商店的实际JS和Jquery代码中实现该问题进行了一些研究，但是由于对JS / JQuery一无所知，因此没有成功。这是代码：

_initStickyInfo: function() {
        if ($(this.selectors.stickCart).length) {
            var e = this,
                t = 0,
                a = $("header").outerHeight() + $(".mini-breadcrumb").outerHeight() + $(".product-section-wrapper").offset().top;
            $(window).scroll(function() {
                var e = $(this).scrollTop();
                e > a ? $("body").addClass("show-sticky-info-product") : $("body").removeClass("show-sticky-info-product"), t = e
            }), $("body").on("click", ".sticky-button.button-cart", function() {
                0 < $(e.selectors.addToCart).length && $(e.selectors.addToCart).trigger("click")
            })
        }
    },

仅在用户滚动页面多一点之后，而不是在用户开始滚动之后，如何使该代码添加“ show-sticky-info-product”类？

如果需要，这里是带有HTML和CSS的页面链接：link

预先感谢

Answer 1

您可以尝试执行$(this).scrollTop() + 40px;，其中40px是您希望它滚动过去的许多像素。

或者尝试.scrollTop(a);，其中a是您想要的高度。

Answer 2

您可以在滚动以下代码的同时处理类。

请参考以下示例：-

window.onscroll = function (e) {
    console.log(window.scrollY); // Value of scroll Y in px
    if(scrollY >200){
    $('div').addClass('green');
    }
    if(scrollY <200){
    $('div').removeClass('green');
    }
};

.green{
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div >hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div >hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div><div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div >hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div><div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div >hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>

Scrolltop函数在滚动确定数量的像素后添加类

2 个答案: