J'ai une barre de navigation supérieure fixe qui devrait glisser vers le haut lorsque l'utilisateur défile devant un certain point et être remplacé par une barre de navigation plus mince. J'utilise velocity.js pour animer le commutateur avec .velocity("slideUp")/("slideDown"). Cependant, l'animation n'arrête pas la boucle. Le commutateur fonctionne bien avec jQuery slideUp() et slideDown() cependant.L'animation de Navbar ne s'arrête pas sur l'événement scroll avec velocity.js (fonctionne avec jQuery)
est ici la version de vitesse:
var offsetPos = $("h1").offset().top;
var navFull = $(".navbar-full");
var navShrink = $(".navbar-shrink");
navShrink.hide();
function navChange() {
var scrollPos = $(this).scrollTop();
if (scrollPos > offsetPos) {
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
} else {
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
$(window).on("scroll", navChange); \t \thtml, body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
\t </nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
\t </nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea, eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti, quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>Et ici, il travaille avec jQuery:
J'ai essayé le stop() et stop(true,true) tour sans résultat ...
[réalises que je ne l'ai pas poser une question!] Donc, ma question est la suivante: Pourquoi ce travail dans jQuery et non la vitesse? Y a-t-il un moyen de déclencher l'événement une seule fois, en particulier, à la position de défilement? - Comme il semble qu'il se déclenche sur tous les événements de défilement.
Une mise en garde: Je suis seulement quelques mois pour jQuery ...
Merci. Cela fonctionne certainement. Je comprends le concept, mais je comprends toujours comment ça fonctionne. Je vais laisser cela ouvert un peu plus longtemps au cas où quelqu'un pourrait faire la lumière sur les raisons pour lesquelles la vélocité est différente ... – lukebm
Comme je l'ai dit, jQuery est probablement en état d'être à un moment donné. C'est soit rejeter l'animation parce que son état précédent est le même, soit accomplir une transition d'état dans laquelle l'état initial et l'état désiré sont les mêmes, auquel cas une animation silencieuse est lancée (et rien ne se passe). – MinusFour