• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przewijanie strony w jQuery

VPS Starter Arubacloud
0 głosów
402 wizyt
pytanie zadane 18 listopada 2018 w JavaScript przez LinosiK Obywatel (1,920 p.)

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();		
		}
		);
	

 

2 odpowiedzi

+1 głos
odpowiedź 18 listopada 2018 przez Jestem_Szaleńcem Użytkownik (530 p.)
edycja 18 listopada 2018 przez Jestem_Szaleńcem

Wystarczy poczytać dokumentacje laugh

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 

komentarz 22 listopada 2018 przez LinosiK Obywatel (1,920 p.)
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 :(
0 głosów
odpowiedź 18 listopada 2018 przez Comandeer Guru (599,730 p.)

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.

1
komentarz 18 listopada 2018 przez Jestem_Szaleńcem Użytkownik (530 p.)

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 wink

2
komentarz 18 listopada 2018 przez Comandeer Guru (599,730 p.)

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.

komentarz 18 listopada 2018 przez Jestem_Szaleńcem Użytkownik (530 p.)

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 wink

komentarz 18 listopada 2018 przez Comandeer Guru (599,730 p.)
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.

Podobne pytania

0 głosów
1 odpowiedź 593 wizyt
0 głosów
1 odpowiedź 216 wizyt
pytanie zadane 4 stycznia 2018 w JavaScript przez Vorex444 Dyskutant (9,610 p.)
0 głosów
1 odpowiedź 225 wizyt
pytanie zadane 26 lutego 2017 w JavaScript przez Kamil Czech Dyskutant (7,700 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...