Kolejny problem nowicjuasza. Chciałbym, aby nav zmieniało kolor dopiero kiedy sekcja pierwsza zbliży si do nav. Teraz mam syt, że zmienia kolor w momencie kiedy tylko sectionOne pojawi się na ekranie.
https://jsfiddle.net/dj7fb6sq/
Robie z tego tutka -
Gdzieś jakis błąd mam lub czegoś nie widzę w oryginalnym kodzie z tutoriala??
Jest cos takiego jak threshold: 1, ale czy w tym przypadku należy tego użyć?
Jakieś sugestie?
.apple {
background: green;
}
<body style="background: darkolivegreen;">
<div style="margin-top: 2000px;">1</div>
<div id="scroll1" class="apple">123</div>
<div style="margin-bottom: 2000px;">2</div>
var intersectionObserver = new IntersectionObserver(function(entries) {
entries[0].target.classList.toggle('apple');
}, { rootMargin: "100px 0px 100px 0px"});
intersectionObserver.observe(document.getElementById('scroll1'));
</body>
Obiekt rootMargin, to chyba to czego szukasz.
W tym przypadku, chodzi mi o podobny efekt, który jest w tutorialu. W moemncie kiedy sekcja1 dociera do menu, menu zmienia kolor.
Ogólnie to jest rozwiązanie z tutoriala - https://jsfiddle.net/Lf3cr2md/
const sectionOneOptions = {
rootMargin: "-200px 0px 0px 0px"
};
Zmień te "-200px" na inną wartość.
Wyjaśnij o co chodzi, bo teraz nie wiadomo do końca. Naciśnij F12 i powinieneś zobaczyć efekty po scroll'owaniu (zmieniające się style, elementy; itp.).
Zmiana wartości nic nie zmienia. Tak jak w tym linku, który podałem https://jsfiddle.net/Lf3cr2md/ w momencie kiedy sekcja jeden dociera do menu, do wspomnianego zostaje dodany kolor. Nie wiem jak to bardziej wyjasnic.
https://jsfiddle.net/yxugwkLe/6/
Chodzi o to, aby kolor menu, zmienil sie dopiero w momencie kiedy niebieska sekcja dociera do menu. Skrolowanie przez cała czerwona sekcję niczego nie powinno zmienic.