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

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的页面的链接： 链接

提前致谢

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>