javascriptjqueryonepage-scroll

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


I'm currently using the onepage-scroll.js (https://github.com/peachananr/onepage-scroll) plug-in on my website to scroll through the homepage. When scrolling past the first "slide" I would also like to add a class (sticky) to my header to change some CSS. I've tried the code below, but I can't seem to get it working and I'm kinda in the dark here on how to make this solution work.

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

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

Solution

  • Try to make it on document ready. Down only my example worked code on onepage-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)});
                });
    

    All you section must have the same class.