引导程序导航栏滚动滑动不平滑

Bootstrap Navbar slide on scroll not smooth

本文关键字：平滑 滚动 导航 引导程序      更新时间：2023-09-26

我希望我的导航栏只在滚动后显示。我已经用JS做到了这一点，但当它向上或向下滑动时，会有一个"台阶"。这是JS代码：

$(document).ready(function(){
    // hide .navbar first
    $(".navbar").hide();
    // fade in .navbar
    $(function () {
        $(window).scroll(function(){
        // set distance user needs to scroll before we fadeIn navbar
            if ($(this).scrollTop() > 100) {
                $('.navbar').slideDown(2000);
            } 
            else {
                $('.navbar').slideUp(2000);
            }
        });
    });
});

以及JSfiddle：http://jsfiddle.net/3dcg2ygw/

我怎样才能把它弄平？

问题是导航栏的高度最小，请在您的代码中尝试：

.navbar {
    height: 97px;
    background-color: #fff;
    overflow:hidden;
    min-height:0px;
}

DEMO

我会在jQuery函数中使用淡入淡出

$(document).ready(function () {
    // hide .navbar first
    $(".navbar").hide();
    // fade in .navbar
    $(function () {
        $(window).scroll(function () {
            // set distance user needs to scroll before we fadeIn navbar
            if ($(this).scrollTop() > 100) {
                $('.navbar').fadeIn().slideDown();
            } else {
                $('.navbar').fadeOut().slideUp();
            }
        });
    });
});
相关文章：