Как отобразить меню при прокрутке?

Question

[del993788]

Здравствуйте. Я знаю, эта тема заезженная, но ничего толкового я не нашел на просторах интернета.

<div class="header">Навигация</div>
<div class="bg"> Картинка на весь экран {height: 100%; width:100%}</div>
<div class="content"> Сам контент </div>

Есть навигация и есть картинка на весь экран. Контент не видно. Он находится ниже.
Как сделать, чтобы у .header изменился класс после того, как он пройдёт всю картинку?
Я натыкался на такой код:

$(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
          $('.header').addClass('fixed');
      } else {
          $('.header').removeClass('fixed');
      }
});

Как только я преодолею расстояние в 100px, то класс блока поменяется, но в моём случае нужно, чтобы класс блока поменялся только когда я преодолеваю расстояние в 100% экрана. Кто нибудь натыкался на такое? Может можно сделать такое с помощью якоря? Как только я прошел якорь, то класс у header поменялся.

Answer 1

[Денис Инешин]

var height = $(window).innerHeight(); // получаем высоту экрана

$(window).scroll(function(){
      if ($(this).scrollTop() > height) {
          $('.header').addClass('fixed');
      } else {
          $('.header').removeClass('fixed');
      }
});

Как то так

Есть еще прекрасный плагинчик, который позволяет выполнять код при достижении определенных точек на странице, попробуйте и его:
imakewebthings.com/waypoints