添加 class onscroll 结合 onepage-scroll.js plug-in

Question

我目前在我的网站上使用 onepage-scroll.js (https://github.com/peachananr/onepage-scroll) plug-in 来滚动主页。当滚动到第一个 "slide" 时，我还想在我的 header 中添加一个 class（粘性）以更改一些 CSS。我已经尝试了下面的代码，但我似乎无法让它工作，而且我对如何使这个解决方案起作用有点一头雾水。

var header = $("header");
$("#sliders").scroll(function() {    
    var scroll = $('#sliders').scrollTop();

    console.log(scroll);
        if (scroll >= 50) {
            header.addClass("sticky");
        } else {
            header.removeClass("sticky");
    }
});

Answer 1

尽量在文件上做好准备。只有我的示例在一页上运行代码-scroll.js

$(document).ready(function(){
                $(".main").onepage_scroll({
                    sectionContainer: ".sectionscroll",
                    responsiveFallback: 600,
                    loop: true,
                    afterMove:function (index){
                            if ((index == 2)||(index == 3)){
                                        $('#main').addClass('darktheme');
                                    }else{
                                        $('#main').removeClass('darktheme');
                                    }
                    }
                });
                //$(".main").moveTo(2);
                $(".btn-list-bottom").click(function(){$(".main").moveTo(4)});
            });

您所有的部分必须具有相同的 class。

添加 class onscroll 结合 onepage-scroll.js plug-in

Add class onscroll combined with onepage-scroll.js plug-in

javascript

jquery

onepage-scroll