当 windows 向下滚动导航栏应该出现一次时，使用 velocity js

Question

我尝试了很多方法，但我没有得到任何答案，即向下滚动时导航栏出现了很多次

$(window).scroll(function() {
if ($(this).scrollTop() === 100) { 
    $(".nav").stop(true, true).velocity('transition.bounceIn');
}
});

Answer 1

尝试用此代码替换您的代码：-

$(document).ready(function(){
var nav = $('.col-nave');
 var scrolled = false;

 $(window).scroll(function () {

if (500 < $(window).scrollTop() && !scrolled) {
    nav.addClass('visible').css({ "position":"fixed"});
    nav.addClass('visible').velocity('transition.bounceIn');
    scrolled = true;
}

if (200 > $(window).scrollTop() && scrolled) {
    nav.addClass('visible').css({ "position":"relative"});
    nav.addClass('visible').velocity('transition.bounceIn ');
    setTimeout(function(){
       nav.removeClass('visible');},500);
       scrolled = false;      
}
});

});

当 windows 向下滚动导航栏应该出现一次时，使用 velocity js

When windows scroll down nav bar should come once, using velocity js

html

css

jquery

velocity.js