Przewijanie strony w jQuery

Question

Cześć, mam pewien problem z przewijaniem strony w jQuery. Mianowicie, posiadam sticky menu na swojej stronie i mój problem tutaj się zaczyna... Gdy kliknę w odnośnik menu to oczywiście strona płynnie zjedzie do danej sekcji na stronie... ale ... Całość przyklei się do górnej krawędzi przeglądarki, przez co moje sticky menu zakryje część. Moje pytanie brzmi czy mogę jakoś ustawić to do jakiego momentu ma zjeżdżać strona aby wszystko fajnie wyglądało. Poniżej zarzucę kod jQuery, jeśli będzie potrzebne więcej kodu oczywiście dorzucę. 

jQuery(function($)
		{
			//zresetuj scrolla
			$.scrollTo(0);
			
			$('#link1').click(function() { $.scrollTo($('#informacje'), 500); });
			$('#link2').click(function() { $.scrollTo($('#scrolldlaczegoja'), 500); });
			$('#link3').click(function() { $.scrollTo($('#scrollomnie'), 500); });
			$('#link4').click(function() { $.scrollTo($('#scrollprace'), 500); });
			$('#link5').click(function() { $.scrollTo($('#scrollformularz'), 500); });
	
			$('.scrollup').click(function() { $.scrollTo($('body'), 1000); });
		}
		);
		
		//pokaż podczas przewijania
		$(window).scroll(function()
		{
			if($(this).scrollTop()>300) $('.scrollup').fadeIn();
			else $('.scrollup').fadeOut();		
		}
		);
	

 

Answer 1

Wystarczy poczytać dokumentacje 

https://github.com/flesler/jquery.scrollTo

masz tam podane różne opcje które dodajesz po celu scrollowania w postaci obieku którego właściwości są opcjami. Także do twoich potrzeb idealnie nada sie opcja offset którą ustawisz na wysokość swojego menu sticky. Całość powinna wyglądać mniej więcej tak:

const menu=$('.twoja_nawigacja').height(); //pobierasz wysokość swojej nawigacji
$('#klikacz').click(()=>{$.scrollTo($('.miejsce_do_którego_scrollujesz'), {duration:500,offset:-menu});}
//scrolujesz do mniejsca minus offset taki jak twoja nawigacja

Wtedy czas animacji podaj najlepiej tak jak pokazałem nie odrazu po elemenice po przecinku tylko już w obiekcie który przekazujesz we właściwości duration. 

Ja zamiast słowa function użyłem funkcji strzałkowej. Mam nadzieje że wiesz co to a jeśli nie to zamiast ()=>{...} napisz po prostu function(){...}

Mam nadzieje że pomogłem :)

Pozdrawiam 

Comments

Sorki, że dopiero odpowiadam, ale byłem trochę zalatany i dopiero usiadłem nad tym co robię. Zrobiłem tak jak napisałeś i w sumie wszystko fajnie działa, jednakże w moim starym kodzie po zjechaniu niżej pojawiała się mała strzałeczka dzięki której użytkownik mógł w szybki sposób znaleźć się na górze strony, dodając ją ze starego kodu do nowego wszystko się krzaczy i nie działa jak powinno :(

Answer 2

Można się pobawić padding-top dla sekcji tak, aby wynosił tyle, ile mniej więcej wysokość sticky menu.

Przy okazji: ten kod w obecnej postaci jest szkodliwy dla UX.

Comments

ale wtedy pojawiają się przerwy które nie są w ogóle potrzebne i niszczą wygląd strony, a na prawdę czytanie dokumentacji narzędzia z którego sie korzysta to podstawa w programowaniu a napewno w dodatkach jQuery. Autor libki przewidział taką potrzebe i zamiast kombinować można przeczytać instrukcje i używać narzędzia wedle jego przeznaczenia a nie imadłem wbijać gwoździe majster 

---

Jeśli imadłem nazywasz wykorzystanie podstawowej wiedzy z zakresu webdevu (która jest np. wykorzystana w Bootstrapie), to nie mamy o czym gadać.

Imadłem wbija się gwoździe, gdy się nie zna podstaw platformy sieciowej i używa skryptów, które powinny już dawno zostać wyrzucone na śmietnik historii, majster.

---

Imadłem nazywam dodawanie pustej przestrzeni na stronie tylko po to żeby coś działało. Równie dobrze mógłby dodać pustego diva kawałek wyżej i do niego przewijać ale to nie o to chodzi przecież. To są dwa przykłady obejścia a nie rozwiązania problemu. Jeśli w jakiś wpisach na blogu wypowiadasz się w ten sposób "Ten skrypt jest wręcz zbrodnią – zarówno jeśli chodzi o UX strony, jak i o sposób pisania kodu" to myślałem że rozumiesz takie rzeczy ale jak widać to nie bardzo majster 

---

Gościu, skończ z tą erystyką, bo to się nudne robi.

Czy w Bootstrapie jest jakaś niepotrzebna pusta przestrzeń? Nie ma, a przewijanie jakoś działa dobrze. Dlaczego? Bo jest zachowany sensowny rytm wertykalny tekstu.

A jak już pijesz do wpisu na blogu, to przeczytaj go dokładnie i zauważ, że opisany jest tam inny, występujący równolegle problem.