Jak otrzymać efekt zmiany stylu nagłówka po zjechaniu na dół strony?

Witam,
mam pewien problem, chciałbym otrzymać efekt nawigacji jak na tej stronę http://www.cosowinerestaurant.com/. Chodzi mi o to że nawigacja nad obrazkiem jest przeźroczysta a gdy zjedzie się niżej robi się biała. Nie wiem jak za bardzo się za to zabrać.

Z góry dziękuje za pomoc.

Biblioteka waypoints do jQuery pozwala Ci wykryć zdarzenie, gdy element pojawi się w zasięgu ekranu, bądź z niego zniknie.

Na tej stronie po prostu po doscrollowaniu do odpowiedniego elementu - w headerze dodawana jest klasa, która zmienia kolory inne.

Można to uprościć, jeżeli wysokość, do której nawigacja ma pozostać normalna jest stała - wtedy tylko nasłuchujesz w javascripcie zdarzenia scroll, jeżeli scrollTop jest powyżej danej wartości - dodajesz do swojej nawigacji klasę i usuwasz, jeżeli scrollTop jest mniejsze.

Wielkie dzięki, ale mam jeszcze jedną prośbę. Czy mógłbyś mi pokazać jak użyć tego plugin, bo niestety mój angielski nie jest rewelacyjny a nie znalazłem nic konkretnego.

A znasz javascript? Wiesz co to callback?

Przykłąd masz bardzo prosty tu (widzę, że waypoints już jest niezależne od jQuery):
https://github.com/imakewebthings/waypoints

pod element wstawiasz element, który chcesz śledzić, w handlerze masz zdarzenie (tam sobie dodasz/usuniesz klasę).

A jak podszkolisz angielski to tylko Ci się przyda ;)

Ok dzięki, tak tak wiem angielski to podstawa ;)

Można to zrobić bez użycia pluginu, za pomocą zwykłego kodu jQuery.

$(window).scroll(function(e) {
     currentposition = $(document).scrollTop();//aktualna pozycja względem początku          
     bannerheight = $("#banner").height();//wysokość elementu, po którym menu ma stać się białe
      if(currentposition>bannerheight)
       {
           //tutaj kod css
           $("nav").addClass("lower");
       }
});

Dzięki, też spróbuje i zobaczę który sposób będzie mi bardziej pasował.

Witam ponownie,
chciałem się dziś zabrać za tą strone. I gdy dodałem kod o który wcześniej pytałem, niestety nie dział tak jak bym chciał. To jest mój kod, gdy zjade troche muszą moj navbar rozszerza się do rozmiarów 600px. Nie wiem co jest nie tak pewnie ja gdzieś zrobiłem błąd proszę o pomoc.

$(window).scroll(function(e) {
     var currentposition = $(document).scrollTop();//aktualna pozycja względem początku          
     var bannerheight = $("#navigation").height(600);//wysokość elementu, po którym menu ma stać się białe
      if(currentposition<bannerheight)
       {         
           $("#navigation").addClass("cos_innego");
       }
  });

wywal to 600, tam nie ma być żadnej wartości

Tak zrobiłem, ale teraz to się nic nie dzieje, navbar dalej jest przeźroczysty i nie zmienił swojego koloru

Wrzuć więcej kodu, najlepiej powycinaj tylko potrzebne elementy i umieść na jsbin albo czymś podobnym.

$(window).scroll(function(e) {
     var currentposition = $(document).scrollTop();//aktualna pozycja względem początku          
     var bannerheight = $("#navigation").height();//wysokość elementu, po którym menu ma stać się białe
      if(currentposition>bannerheight)//odwrotny warunek
       {         
           $("#navigation").addClass("lover");
       }
  });

Warunek masz błędny dlatego nie działało.

http://jsbin.com/kuvidalaku/1/edit?html,css,js

Też na początku myślałem że zły warunek ale i tak nie działa z takim warunkiem jak podałeś.

Masz gdzieś zawieszoną tą stronę on-line?

Na pewno masz podłączone jQuery? Wstaw do warunku alert("komunikat") i powiedz czy wyświetla się okienko z napisem komunikat. Możesz dać listing całego pliku javascript?

Tak na pewno mam podłączone jQuer, bo używam tez bootstrapa.
http://jsbin.com/babediqegu/1/edit?html,css,js

Nie używam Twitter Bootstrap, ale sprawdź czy przypadkiem $(window).scroll nie jest nadpisywana przez bootstrapa.

nie podmienia się tło bo wartość background-color jest równoważna z background-color z normalnego stylu i gryzą się ze sobą
jeśli chcesz żeby kolor w lover był ważniejszy dopisz po white !important lub po prostu styl lover opisz PONIŻEJ zwykłego - kolejność stylów ma znaczenie

zapewne w skrypcie chcesz jeszcze dopisać else w którym powinieneś usunąć styl gdy user wjedzie z powrotem na górę

else
    $('#navigation').removeClass('lover');

ale na litość boską zmień nazwę tego stylu :D

Hahaha, zmieniłem nazwę klasy :) i po dodaniu

!important 

wszystko działa, chciałbym się zapytać jeszcze czy mógłby uzyskać taki efekt taki po przejechaniu odpowiedniej odległości.

Jest taka możliwość.
Wstaw "odległość" po jakiej chcesz aby pojawiło się białe tło w miejsce bannerheight.

Super, wielkie dzięki za pomoc.