Как добавить класс при достижении определенного элемента верха страницы и удалить его?

Question

[William]

есть такой код:

jQuery(document).ready(function($){

            $(window).on('scroll', function(){
                if($(window).scrollTop() >= $('#element').offset().top){
                  $('.menu').addClass('addclass');
                }
              });
        });

добавляет addclass к menu при достижении id="element" верха страницы и прокрутки далее к низу, но как удалить addclass, когда id="element" снова оказался ниже верха страницы

Comments

[Ankhena]

else
removeClass

[William]

Ankhena, можно записать в готовый код? то что else и remove - понятно

[Ankhena]

William,
else {$('.menu').removeClass('addclass');}

Answer 1

[miliko mikoyan]

Просто сделайте обратное:

jQuery(document).ready(function($){

        $(window).on('scroll', function(){
            if($(window).scrollTop() < $('#element').offset().top){
              $('.menu').removeClass('addclass');
            }
          });
    });

или Просто используйте toggleClass или removeClass :)

jQuery(document).ready(function($){
    $(window).on('scroll', function(){
        if($(window).scrollTop() >= $('#element').offset().top){
            $('.menu').addClass('addclass');
        }
        else 
        {
            $('.menu').toggleClass('addclass');
            //or use $('.menu').removeClass('addclass');
        }
 });
});