Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Dodawanie #nazwa_sekcji po pojawieniu się jej na ekranie (strona onepage) / zgranie ze sobą funkcji click i scroll, Jak zgrać klikalność menu, hasztagi w adresie i ręczne przewijanie
babajaro
post 27.09.2018, 09:08:46
Post #1





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 25.02.2004
Skąd: Grodzisk Maz.

Ostrzeżenie: (0%)
-----


Cześć,

być może coś namieszałem, nie czuję się mocny w jquery, ale zanim napisałem kilka rzeczy wypróbowałem.
Ogólnie chodzi o to, że mam stronę typu onepage, nie chcę korzystać ze skryptu fullpage.js, bo się krzaczy, próbuję więc sam to ogarnąć.
Zamysł jest prosty w planie: mamy kilka sekcji na stronie głównej, mamy menu, po kliknięciu którego przeskakujemy do danej sekcji po #, dodaje się ten # do adresu.
Oprócz tego mamy oczywiście możliwość przewijania strony ręcznie. Mam skrypt, który zaznacza w menu odpowiedni element jak sekcja pojawi się na stronie.

Pierwszy problem jaki miałem to taki, że czasem były widoczne 3 sekcje, zaznaczały się 3 elementy w menu. Logiczne, widać - zaznacza.
* To rozwiązałem chyba prostym sposobem, najpierw usuwam active ze wszystkich elementów a potem zaznaczam tylko w tym ostatnim.

Ostatnie dwa problemy jakie mi zostały:
- zmiana adresu (dodanie #nazwa_sekcji) jak się pojawi na stronie (tylko dla tej najniższej widocznej, czyli jak widzę dwie sekcje to dla tej drugiej, która właśnie się pojawia);
- scalenie ze sobą funkcji click i scroll, bo o ile sobie scrolluję w obie strony - to jest luz, efekt do zaakceptowania, natomiast jak kliknę w menu to wiadomo, że wybrana przez click sekcja pojawia się na samej górze strony, ale pod nią jest już kolejna i skrypt odpowiedzialny za scrollowanie zaznacza w menu tylko tę dolną sekcję, bo tak sobie to ustawiłem (patrz *); po prostu fajnie jakby click w menu wyłączał scrollowanie, może na kilka sekund, nie wiem jak do tego podejść.

Będę wdzięczny za jakieś wskazówki.

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2.  
  3. $.fn.isInViewport = function() {
  4. var elementTop = $(this).offset().top;
  5. var elementBottom = elementTop + $(this).outerHeight();
  6.  
  7. var viewportTop = $(window).scrollTop();
  8. var viewportBottom = viewportTop + $(window).height();
  9.  
  10. return elementBottom > viewportTop && elementTop < viewportBottom;
  11. };
  12.  
  13. // zmniejszanie/zwiększanie headera po wejściu na stronie
  14.  
  15. var scroll = $(window).scrollTop();
  16. if(scroll==0){
  17. $('#header').removeClass('active');
  18. } else {
  19. $('#header').addClass('active');
  20. }
  21.  
  22. // zmniejszanie/zwiększanie headera w czasie przewijania
  23.  
  24. $(window).scroll(function (event) {
  25.  
  26. var scroll = $(window).scrollTop();
  27. if(scroll==0){
  28. $('#header').removeClass('active');
  29. } else {
  30. $('#header').addClass('active');
  31. }
  32.  
  33. });
  34.  
  35.  
  36. // aktywowanie elementów menu w czasie scrollowania
  37.  
  38. $(window).on('resize scroll', function() {
  39. $('.section').each(function() {
  40. var activeSection = $(this).attr('id');
  41. if ($(this).isInViewport()) {
  42. $('.menuglowne').removeClass('active');
  43. $('#m_' + activeSection).addClass('active');
  44. } else {
  45. $('#m_' + activeSection).removeClass('active');
  46. }
  47. });
  48. });
  49.  
  50.  
  51. // aktywowanie elementów menu po kliknięciu w element menu
  52.  
  53. $('.menuglowne').click(function(){
  54.  
  55. var activeSection = $(this).attr('id');
  56. var section = activeSection.substr(2, activeSection.length);
  57.  
  58. $([document.documentElement, document.body]).animate({
  59. scrollTop: $('#' + section).offset().top - 0}, 500);
  60.  
  61. //$('.menuglowne').removeClass('active');
  62. $('#m_' + section).addClass('active');
  63.  
  64. });
  65.  
  66. // aktywowanie elementu menu po wejściu bezpośrednio na stronę z # w adresie lub odświeżenie takiej
  67.  
  68. if(window.location.hash) {
  69. var oznaczMenu = window.location.hash.substr(1, window.location.hash.length);
  70. $('.menuglowne').removeClass('active');
  71. $('#m_' + oznaczMenu).addClass('active');
  72. }
  73.  
  74.  
  75.  
  76. });
[JAVASCRIPT] pobierz, plaintext


Być może coś da się zrobić prościej, nie trzeba powtarzać np. "// zmniejszanie/zwiększanie headera po wejściu na stronie" i "// zmniejszanie/zwiększanie headera w czasie przewijania" i da się to zrobić w jednym skrypcie, ale próbowałem coś kombinować.

Z góry dziękuję za pomoc.


--------------------
Jarek "babajaro"
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 03:38