IntersectionObserver

Odpowiedz Nowy wątek
2019-07-09 14:01
0

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?

Ale co chcesz osiągnąć? Żeby po pojawieniu się np. znacznika nav, zmienił się kolor na inny? - Neutral 2019-07-09 14:13

Pozostało 580 znaków

2019-07-09 15:32
0
.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.

Sorki cos ten kod mi nie działa. Możesz to wstawic do JSFidle?? - KordianB 2019-07-09 17:02

Pozostało 580 znaków

2019-07-09 17:00
0

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/

edytowany 3x, ostatnio: KordianB, 2019-07-09 17:29

Pozostało 580 znaków

2019-07-09 17:34
0
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.).

link

edytowany 2x, ostatnio: Neutral, 2019-07-09 20:10

Pozostało 580 znaków

2019-07-09 17:37
0

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.

OK, to kiedy ma się zmienić kolor, w którym momencie? - Neutral 2019-07-09 17:39
Przepraszam cos pomyliłem. Zaraz wyjasnie. - KordianB 2019-07-09 17:47

Pozostało 580 znaków

2019-07-09 17:59
0

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.

Pokaż pozostałe 2 komentarze
Jaki kod/ Ten, który działa w moim przypadku? - KordianB 2019-07-09 20:46
Tak, ten który działa. - Neutral 2019-07-09 21:16
A nie jest tak czasem, że funkcjonalność działa bez "-200px"? - Neutral 2019-07-10 11:41
Tak, to jest tylko po to aby animacja zaczeła się troszkę wcześniej. w tym przypadku bez znaczenia. - KordianB 2019-07-10 12:03

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0