Witam
Piszę stronkę, mniej więcej taką:
https://blackrockdigital.github.io/startbootstrap-agency/
I natknąłem się na problem, ostatnio mi bardzo pomogliście, więc mam nadzieję, że i tym razem mogę na was polegać :)
Więc do rzeczy. Chodzi o animowane menu sticky. Miałem pewną koncepcję jak to zrobić, ale nie wiem czy jest ona do końca poprawna. Poniżej podaję kod:
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="menu__fixed--hidden"></div> <h1>Lorem ipsum.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab expedita corporis consectetur impedit aliquam laborum quidem nostrum placeat atque odio!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis architecto, dolore ullam consectetur fuga fugiat est amet. Quos, omnis ipsam repellat perferendis laboriosam consequatur odio et tempore nesciunt, atque harum totam, animi aliquid cum sapiente beatae numquam doloremque dolores.</p> <h2>Lorem ipsum dolor.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aut consequuntur aliquam, ipsa eius sint, ex molestiae repellendus veritatis labore quo odio, optio velit non nemo ipsum asperiores nam ullam. Nihil necessitatibus repellat, in molestias voluptatum ad incidunt nisi sint corporis dignissimos eligendi facilis quisquam autem tenetur suscipit ullam quibusdam!</p> <h1>Lorem ipsum.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab expedita corporis consectetur impedit aliquam laborum quidem nostrum placeat atque odio!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis architecto, dolore ullam consectetur fuga fugiat est amet. Quos, omnis ipsam repellat perferendis laboriosam consequatur odio et tempore nesciunt, atque harum totam, animi aliquid cum sapiente beatae numquam doloremque dolores.</p> <h2>Lorem ipsum dolor.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aut consequuntur aliquam, ipsa eius sint, ex molestiae repellendus veritatis labore quo odio, optio velit non nemo ipsum asperiores nam ullam. Nihil necessitatibus repellat, in molestias voluptatum ad incidunt nisi sint corporis dignissimos eligendi facilis quisquam autem tenetur suscipit ullam quibusdam!</p> <h1>Lorem ipsum.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab expedita corporis consectetur impedit aliquam laborum quidem nostrum placeat atque odio!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis architecto, dolore ullam consectetur fuga fugiat est amet. Quos, omnis ipsam repellat perferendis laboriosam consequatur odio et tempore nesciunt, atque harum totam, animi aliquid cum sapiente beatae numquam doloremque dolores.</p> <h2>Lorem ipsum dolor.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aut consequuntur aliquam, ipsa eius sint, ex molestiae repellendus veritatis labore quo odio, optio velit non nemo ipsum asperiores nam ullam. Nihil necessitatibus repellat, in molestias voluptatum ad incidunt nisi sint corporis dignissimos eligendi facilis quisquam autem tenetur suscipit ullam quibusdam!</p> <script src = "js.js"></script> </body> </html>
body {
background: #AAAAAA;
color:white;
margin:0;
}
p {
font-size:1.6rem;
}
h1 {
color:#000000;
}
h2 {
color:#111111;
}
.menu__fixed--hidden {
width:100%;
height:5rem;
background: #000000;
position:fixed;
top:0;
display:none;
}
.open {
display:block;
background: #fff;
}
(function() {
var add__class = document.querySelector(".menu__fixed--hidden");
document.addEventListener('scroll', function() {
if (document.body.scrollTop >=20) {
add__class.classList.add("open");
} else
add__class.classList.remove("open");
}, false);
})();
Stworzyłem prototyp, zeby sprawdzic czy tak się w ogóle da to rozwiązać. Otóż JS działa, gdyż po zescrollowaniu na 20px tworzy klasę "open", która wyświetla menu ustawione pozycją fixed caly czas u góry. Chciałbym jednak, aby to odbyło się w sposób jak na stronie w załączonym linku. Próbowałem dodać transition, ale nie zadziałało. Czy ktoś ma pomysł na to, jak można to rozwiązać?