Wytłumaczył by mi ktoś dany kod js dogłębnie?

Question

Tak jak w pytaniu, prosiłbym o naprawdę dogłębne,rzetelne wytłumaczenie.

<script>

	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>

 

Answer 1

$(document).ready(function() {

});

Ta część kodu odpowiada za to, aby krypt nie wykonywał się przed załadowaniem dokumentu, czyli wszystkich elementów twojej strony.

var NavY = $('.nav').offset().top;     
var stickyNav = function(){
var ScrollY = $(window).scrollTop();

NavY - zapisanie do zmiennej wartości na osi Y, gdzie znajduję się górny bok elementu nawigacji.

stickyNav - zapisanie funkcji do zmiennej

ScrollY ​- zapisanie do zmiennej wartości opisującej, o ile pixeli od góry zeskrollowana jest strona

if (ScrollY > NavY) { 
        $('.nav').addClass('sticky');
    } else {
        $('.nav').removeClass('sticky'); 
    }

Chodzi to o sprawdzenie, czy użytkownik zestrollował stronę tak, że górny "bok" window jest już niżej niż górny "bok" elementu nawigacji. Możesz zobaczyć to na przykładzie, scrollująć na tej stronie miroslawzelent.pl. Jeżeli tak, do nawigacji dodawana jest klasa sticky, jeżeli nie jest usuwana.

$(window).scroll(function() {
        stickyNav();
    });

Podpięcie funkcji, do eventu. Za każdym razem, gdy użytkownik zescrolluje stronę, wykona się funkcja znajdująca się w zmiennej stickyNav.

Comments

$(document).ready(function() {
 
});

Można z tego zrezygnować jeżeli skrypt znajduje się przed zamknięciem znacznika body.

Chodzi to o sprawdzenie, czy użytkownik zestrollował stronę

Te użytkowniki to trolle są :D

---

nie wykonywał się przed załadowaniem dokumentu, czyli wszystkich elementów twojej strony.

Nieprawda. To czeka na wczytanie się drzewka DOM, nie wszystkich elementów strony. Bardzo łatwo to udowodnić, dodając super ciężki obrazek. $( document ).ready odpali się przed wyświetleniem tego obrazka. 

zapisanie do zmiennej wartości na osi Y, gdzie znajduję się górny bok elementu nawigacji.

Czyli, mówiąc po ludzku, odległość nawigacji od górnej krawędzi strony :P I w sumie słowo "offset" pasuje bardziej do takiej definicji.