Как правильно написать добавление класса при скроллинге?

Question

[Игорь Лавров]

Как правильно написать добавление класса при скроллинге?

Использовал этот:

<script type="text/javascript">
    $(window).scroll(function(){
      $('.nav-header').toggleClass('color-bg', $(this).scrollTop() > 0);
    });
    </script>

Но при нажатии f5 не всегда срабатывает. Т.е. класс получается не добавляется. как это исправить?

Только так выходит как мне нужно:

<script type="text/javascript">
    $(window).scroll(function(){
        $('.nav-header').toggleClass('color-bg', $(this).scrollTop() > 0);
      });
      $(document).ready(function(){
        $('.nav-header').toggleClass('color-bg', $(this).scrollTop() > 0);
      });
    </script>

Но мне кажется так не правильно!

Answer 1

[iBird Rose]

ну ты при скролле добавляешь. обновление страницы это не скролл. значит добавляй и в ready

Comments

[Игорь Лавров]

$(document).ready(function(){
      $(window).scroll(function(){
        $('.nav-header').toggleClass('color-bg', $(this).scrollTop() > 0);
      })
    });

Сделал, но ничего не изменилось

[iBird Rose]

Игорь Лавров: от этого и код твой не изменился. примерно так надо

$(document).ready(function(){
      $('.nav-header').toggleClass('color-bg', $(window).scrollTop() > 0);
    });
$(window).scroll(function(){
        $('.nav-header').toggleClass('color-bg', $(this).scrollTop() > 0);
      })