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.
$(document).ready(function(){ $.fn.isInViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }; // zmniejszanie/zwiększanie headera po wejściu na stronie var scroll = $(window).scrollTop(); if(scroll==0){ $('#header').removeClass('active'); } else { $('#header').addClass('active'); } // zmniejszanie/zwiększanie headera w czasie przewijania $(window).scroll(function (event) { var scroll = $(window).scrollTop(); if(scroll==0){ $('#header').removeClass('active'); } else { $('#header').addClass('active'); } }); // aktywowanie elementów menu w czasie scrollowania $(window).on('resize scroll', function() { $('.section').each(function() { var activeSection = $(this).attr('id'); if ($(this).isInViewport()) { $('.menuglowne').removeClass('active'); $('#m_' + activeSection).addClass('active'); } else { $('#m_' + activeSection).removeClass('active'); } }); }); // aktywowanie elementów menu po kliknięciu w element menu $('.menuglowne').click(function(){ var activeSection = $(this).attr('id'); var section = activeSection.substr(2, activeSection.length); $([document.documentElement, document.body]).animate({ scrollTop: $('#' + section).offset().top - 0}, 500); //$('.menuglowne').removeClass('active'); $('#m_' + section).addClass('active'); }); // aktywowanie elementu menu po wejściu bezpośrednio na stronę z # w adresie lub odświeżenie takiej if(window.location.hash) { var oznaczMenu = window.location.hash.substr(1, window.location.hash.length); $('.menuglowne').removeClass('active'); $('#m_' + oznaczMenu).addClass('active'); } });
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.