Question

我正在尝试创建一个滚动后粘在屏幕顶部的导航栏。我遵循了两个不同的教程，但我似乎无法让它们中的任何一个正常工作。

first教程根本不会粘在屏幕顶部。 second教程确实贴在了屏幕的顶部，但是如果你向下滚动得足够远，那么直到它粘在顶部之后才能看到导航。

这就是我现在所拥有的（在第一个教程之后）：

var  n = $("#nav-bar");
    ns = "nav-bar-scrolled";
    hdr = $('#nav-bar').offset().top;

$(window).scroll(function(){
   if($(this).scrollTop() > hdr){
       n.addClass(ns);
   }else{
       n.removeClass(ns);
   }

});

这是第二个教程之后的JS代码：

$(function(){
    // Check the initial Poistion of the Sticky Header
     var stickyHeaderTop = $('header').height();

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {              
                $('#nav-bar').css({position: 'fixed', top: '0px'});
                $('#stickyalias').css('display', 'block'); //this doesn't do anything
            } else {
                $('#nav-bar').css({position: 'static', top: '0px'});
                $('#stickyalias').css('display', 'none'); //this doesn't do anything
            }
        });
  });

此处的完整代码：https://jsfiddle.net/linahsie/rhp65j2b/2/ 谢谢！

Answer 1

在您的JS中，n应为#nav-bar，ns（因为您正在切换课程）应该是nav-bar-scrolled，而hdr应该是标题的底部位置，因为这是您希望导航将其自身附加到窗口顶部的点。然后在CSS中，您希望使用#nav-bar.nav-bar-scrolled作为固定菜单的选择器，以匹配您在JS中所做的更改。

var  n = $("#nav-bar");
    ns = "nav-bar-scrolled";
    hdr = $('header').offset().top + $('header').outerHeight();

$(window).scroll(function(){
   if($(this).scrollTop() > hdr){
       n.addClass(ns);
   }else{
       n.removeClass(ns);
   }
    
});

/*
$(function(){
    // Check the initial Poistion of the Sticky Header
     var stickyHeaderTop = $('header').height();
 
    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {              
                $('nav').css({position: 'fixed', top: '0px'});
                $('#stickyalias').css('display', 'block');
            } else {
                $('nav').css({position: 'static', top: '0px'});
                $('#stickyalias').css('display', 'none');
            }
        });
  });

*/


/*
$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('nav').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('nav').css({
                position: 'fixed',
                top: '0px'
            });
            $('#about').css('margin-top', $('nav').outerHeight(true) + parseInt($('header').css('marginBottom')));
        } else {
            $('nav').css({
                position: 'static',
                top: '0px'
            });
            $('#about').css('margin-top', '0px');
        }
    });
});
*/

*{
    margin: 0;
    padding: 0;
}

.container{
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
}

header{
    height: 100vh;
    background: #f07057;
}

#after-header{
    padding-top: 100vh;
}

#nav-bar,
#about,
#a2{
    position: relative;
}

#header-content{
    position: absolute;
    top: 50%;
    left: 50%;
}

#nav-bar{
    height: 75px;
    font-family: 'Montserrat';
    background-color: #FFE77C;
    z-index: 150;
    width: 100%;
}

header{
    position: fixed;
    width: 100%;
}

#nav-bar.nav-bar-scrolled{
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
}

#nav-bar h1{
    padding-top: 10px;
    font-size: 270%;
    text-align: center;
    float: left;
}

#nav-list{
    float: right;
}

.dir{
    float: left;
    padding-top: 25px;
    text-decoration:none;
    padding-left: 15px;
}

#about{
    height: 100vh;
    background-color: antiquewhite;
}

#a2{
    height: 100vh;
    background-color: beige;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        
        <header>
            <div id="header-content">
                <h1>Text Here</h1>
               
            </div> <!--header-content-->
        </header>
        
        <div id="after-header">
            <nav id="nav-bar">
                <div class="container">
                    <h1>Nav Bar</h1>
  
                </div> <!--container-->
            </nav>  <!--nav-->
        
            <div id="about">
                <div class="container">
                    <h1>Hello, world!</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
                </div>
            </div> <!--end of about-->
           
           <div id="a2">
                <div class="container">
                    <h1>Hello, world!</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
                </div>
            </div> 
        
        </div> <!--end of after-header-->
            
  </body>

Answer 2

看一下jquery，你定义了var n = $("#nav");，但你没有nav id="nav"，更改为n = $("#nav-bar");

粘滞导航栏不起作用

2 个答案: