Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> 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
trueblue
post 27.09.2018, 09:17:21
Post #2





Grupa: Zarejestrowani
Postów: 6 783
Pomógł: 1826
Dołączył: 11.03.2014

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


Zamiast kombinować z połączeniem zaznaczania przy scroll i click, zaznaczaj zawsze sekcję, która jest najbliżej górnej krawędzi i jednocześnie nie jest powyżej niej.


--------------------
Go to the top of the page
+Quote Post
babajaro
post 27.09.2018, 09:50:25
Post #3





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

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


No tak, ale przy przeglądaniu manualnym strony, czyli scrollowaniu, menu podświetlać się powinno jak warstwa z nim powiązana nie jest na samej górze a wystaje choćby piksel na dole, prawda? I tak to się dzieje teraz w moim amatorskim kodzie.
W ten sposób daję znać, że wchodzi nowa sekcja.

Dlatego kombinuję jak to połączyć, bo klik działa od góry, scroll od dołu. Sam klik zrobiłem jeśli nie ma scrolla, to nie jest trudne, zaznaczam to co kliknąłem i to co jest w haszu urla, resztę olewam i działa. Ale jest też ten scroll, który również się wykona, bo strona się scrollowała.

Najprościej było zrobić:
Jeśli ktoś kliknie w .menugorne to zrób akcję z clickiem a jeśli nie - akcję ze scrollowaniem.
Tylko jak w warunek if-a wrzucić to wykrycie kliknięcia w ten element. Da się? To by jeden problem załatwiło i wyłączyło w momencie akcję ze scrollem.
Chyba, że uruchomienie funkcji click i to przesunięcie po kliknięciu już uruchamia automatycznie drugą funkcję, bo przecież już clicka nie ma - wtedy czy można uśpić funkcję scroll po wykonaniu clicka na czas przesunięcia po nim.

Sorry, jak to co piszę jest bez sensu, ale głośno myślę.


--------------------
Jarek "babajaro"
Go to the top of the page
+Quote Post
trueblue
post 27.09.2018, 09:56:45
Post #4





Grupa: Zarejestrowani
Postów: 6 783
Pomógł: 1826
Dołączył: 11.03.2014

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


Może to pomoże: http://kawalekkodu.pl/post/masz-cela-jak-b...z-przesunieciem


--------------------
Go to the top of the page
+Quote Post

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: 1.11.2024 - 00:37