Navbar动画不会在使用Velocity.js进行滚动事件时停止（适用于jQuery）

Question

I have a fixed top navbar that should slide up when the user scrolls past a certain point and be replaced with a slimmer navbar. I'm using velocity.js to animate the switch with .velocity("slideUp") / ("slideDown") . However, the animation doesn't stop looping. The switch works fine with jQuery slideUp() and slideDown() though.

Here's the velocity version:

 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 ); 

 html, 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> </nav> <nav class="navbar-shrink"> <p>Why doesn't this stop!</p> </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> 

And here it is working with jQuery:

CodePen

I've tried the stop() and stop(true,true) trick to no avail...

[Realise I didn't ask a question!] So, my question is: Why does this work in jQuery and not Velocity? Is there a way to make the event fire only once, specifically, at the scroll position? - as it looks like it fires on all scroll events.

A caveat: I'm only a couple of months in to jQuery...

Answer 1

It doesn't exactly loop. It's just being executed a lot by the scrollEvent . jQuery is probably stateful, I'm not sure about velocity. You'll need a variable that checks if you are scrolled down enough and that it has already run once.

 var offsetPos = $("h1").offset().top; var navFull = $(".navbar-full"); var navShrink = $(".navbar-shrink"); navShrink.hide(); var animateUp = false; var animateDown = true; function navChange() { var scrollPos = $(this).scrollTop(); if (scrollPos > offsetPos) { if(animateUp === false){ animateDown = false; animateUp = true; navFull.velocity("slideUp"); navShrink.velocity("slideDown"); } } else { if(animateDown == false){ animateUp = false; animateDown = true; navFull.velocity("slideDown"); navShrink.velocity("slideUp"); } } } $(window).on("scroll", navChange); 

 html, 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> </nav> <nav class="navbar-shrink"> <p>Why doesn't this stop!</p> </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>