Skrypt na zamianę klasy

Witajcie.

Jestem słaby z JS ale chciałem to zmienić. Jednak napotkałem pierwsze schody.

Chciałbym uzyskać jakieś podpowiedzi dot. mojego problemu. Domyślnie jest wpisana klasa w dokumencie html (class="hiding") i ma ustawiony css, i chce teraz, że gdy scrollem trafimy na ten obiekt z tą klasą to skrypt nadpisuje go inną (class="visible"). Mogę prosić jakieś podpowiedzi dot. stworzenia tego?

Sama zmiana klasy, to zapewne coś na zasadzie:
 

if ( $('#twoj_div').hasClass('hidding') ) {
    $('#twoj_div').removeClass('hidding').addClass('visible');
}

Czyli sprawdzamy czy taka klasa jest, jeśli jest to ją usuwamy i dajemy inną.


Co rozumiesz przez stwierdzenie:

scrollem trafimy na ten obiekt

? 

Że jest on widoczny w danym momencie na ekranie?

Generalnie to musisz znać pozycję swojego elementu, wiedzieć na jakim etapie jest pasek przewijania i pewnie do tego dojdzie wysokość dokumentu w przypadku iż miałby on być większy i odkrywać Twój element od razu, więc wtedy ustawiłbyś element już statycznie.

Przydać Ci się może:

http://api.jquery.com/scrollTop/

http://api.jquery.com/offset/

http://api.jquery.com/height/

http://api.jquery.com/outerHeight/

Myślę, że na początek wystarczy

Sama zmiana klasy, to zapewne coś na zasadzie:
 

if ( $('#twoj_div').hasClass('hidding') ) {
    $('#twoj_div').removeClass('hidding').addClass('visible');
}

Czyli sprawdzamy czy taka klasa jest, jeśli jest to ją usuwamy i dajemy inną.


Co rozumiesz przez stwierdzenie:

? 

Że jest on widoczny w danym momencie na ekranie?

Dokładnie tak, nie wiedziałem jak to nazwać

Generalnie to musisz znać pozycję swojego elementu, wiedzieć na jakim etapie jest pasek przewijania i pewnie do tego dojdzie wysokość dokumentu w przypadku iż miałby on być większy i odkrywać Twój element od razu, więc wtedy ustawiłbyś element już statycznie.

 

Przydać Ci się może:

 

http://api.jquery.com/scrollTop/

http://api.jquery.com/offset/

http://api.jquery.com/height/

http://api.jquery.com/outerHeight/

 

Myślę, że na początek wystarczy

Tylko, że dane sekcje nie będą miały określonej wysokości, dlatego najlepiej jakby była taka możliwość aby skrypt automatycznie wykrywał kiedy jest aktywna sekcja na ekranie i wtedy dokonywał zamiany klasy.

Nie chodziło mi o wysokość sekcji, ale o wysokość dokumentu oraz okna.

Gdy przewijasz stronę, musisz wiedzieć kiedy się skończy lub kiedy dojedziesz do początku. Powiedzmy że sekcja będzie na środku dokumentu więc musisz ustalić pozycję za pomocą offset().top, a później sprawdzić czy ta pozycja jest równa pozycji na którą przewinąłeś stronę. Coś w tym kierunku. Bez obliczeń się nie obejdzie

Przeanalizuj tą funkcje:

function isOnScreen(element) {

    var elementOffsetTop = $(element).offset().top,
        elementHeight = $(element).height(),
        screenScrollTop = $(window).scrollTop(),
        screenHeight = $(window).height(),
        scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0,
        elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

    return scrollIsAboveElement && elementIsVisibleOnScreen;

}

Zwraca true jeśli element znajdzie się w polu widzenia. Wtedy wrzucasz to w onScroll oraz $.each (w przypadku większej ilości elementów) i wykonujesz swoją akcję jeśli funkcja zwróci true.

.onScreen(); - A jQuery plugin that does stuff to elements when they enter or leave the viewport