Tuesday, September 18, 2018

if section scroll top add remove active class


<div class="wrapper">
   <section class="sec" style="height:500;  background: #24dab4;"></section>
   <section class="sec" style="height:500;  background: #6610f2;"></section>
   <section class="sec" style="height:500;  background: #28a745;"></section>
   <section class="sec" style="height:500;  background: #8bc34a;"></section>
</div>


$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper .sec').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('.sec.active').removeClass('active');
                $('.sec').eq(i).addClass('active');
            }
        });

    } else {
        $('.sec.active').removeClass('active');
        $('.sec:first').addClass('active');
    }

}).scroll();​

No comments:

Post a Comment

For Professional website contact WEB CODE ADDICT

View this post on Instagram A post shared by WebCodeAddict (@webcodeaddicted)