Question

我正在建立一个网站，并且在页面底部的开头有一个导航栏。滚动时，我想将导航栏固定在顶部，并使其仅在再次向上滚动时才显示。我正在尝试使用Javascript方法“ addClass（）”和“ removeClass（）”，我的引导程序版本为4.3.1。

这是我的HTML代码：

         <nav class="navbar bg-inverse bg-dark navbar-full navbar-dark" 
        id="main-nav">
                <a class="navbar-brand" href="#">ONE<span class="bold- 
        green">TREE</span></a>
                <ul class="nav navbar-nav">

这是我的Javascript代码：

        $(document).ready(function() {

            $(window).scroll(function() {

                if ($(window).scrollTop() > 970) {
                    $('.navbar').addClass('fixed-top');
                }
                 if ($(window).scrollTop() > 971) {
                    $('.navbar').removeClass('fixed-top');
                }
            });


        });

谢谢，我能提供的任何信息都请询问

Answer 1

从提供的代码的外观来看，两个比较都“大于”，这意味着固定顶部类将仅应用于970和971像素之间。

    $(document).ready(function() {

        $(window).scroll(function() {

            if ($(window).scrollTop() < 970) {
                $('.navbar').addClass('fixed-top');
            }
             if ($(window).scrollTop() > 971) {
                $('.navbar').removeClass('fixed-top');
            }
        });


    });

Answer 2

尝试这个：

let c, currentScrollTop = 0, navbar = $('.navbar');
$(window).scroll(function () {
    let a = $(window).scrollTop();
    let b = navbar.height();
    currentScrollTop = a;
    if (c < currentScrollTop && a > b + b) {
        navbar.removeClass("fixed-top");          
    } else if (c > currentScrollTop && !(a <= b)) {
        navbar.addClass("fixed-top");
    }
    c = currentScrollTop;
});

导航栏未使用Java脚本固定在顶部

2 个答案: