使用 jquery 修复顶部菜单。向下滚动时菜单不会稍后出现？

Question

我想让 header 下方的导航栏在向下滚动时出现在屏幕顶部！向下滚动时，菜单不会立即出现。进一步向下滚动后出现！

还有人可以解释一下吗？ $(window).height() - 70;我不知道它会做什么 return。

jquery代码：

$(document).ready(function(){
    $(".nav").slideDown(800);

    $(window).on('scroll',function(){
        var navHeight = $(window).height() - 70;
        if ( $(window).scrollTop()> navHeight){
            $('.nav').addClass('fixed');
            $('.nav').css("display","none");
            $('.nav').fadeIn("fast");
        }
        else{
            $('.nav').removeClass('fixed');
            $('.nav').css("display","block");
        }
    });

});

我的html代码：

<div id="header">
    <div id="header-container">
        Logo goes here!!
    </div>
</div>

<div class="nav">
    <div class="nav-container">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Browse</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</div>


<div class="main-body">
    <div class="article-area">
        <div class="article">
            <h3>This is the title</h3>
            <hr>
            <img src="imgtest.jpg"></img>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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
            <div class="clear"></div>
        </div>

        <div class="article">
            <h3>This is the title</h3>
            <hr>
            <img src="imgtest.jpg"></img>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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
            <div class="clear"></div>
        </div>          
    </div>

    <div class="sidebar-area">
        ertertre
    </div>
    <div class="clear"></div>
</div>

我的css代码：

body{
    margin: 0;
    padding: 0;
    background: #cccccc;
}

.clear {
    clear: both;
}

#header{
    background: #FF9900;
    height: 160px;
    width: 100%;
}

#header-container{
    width: 960px;
    height: 160px;
    margin: 0px auto 0px auto;
}

.nav{
    width: 100%;
    height: 70px;
    background: rgba(0,0,0,0.5);
    display:none; /*hiding it for cool jquery slide down effect*/
}

.fixed {
    position: fixed; 
    top: 0; 
    height: 70px; 
    z-index: 1;
}

.nav .nav-container{
    width: 960px;
    height: 62px;
    margin: 0 auto;
}

.nav .nav-container ul{
    padding-top: 6px;
    margin: 0 auto;
}

.nav .nav-container ul li{
    display: inline;
    padding: 0px;
    border-radius: 10px;
    margin-right: 20px;
    margin-left: 7px;
    background: #000000;
}

.nav .nav-container ul li a{
    color: #FF9900;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    display: inline-block;
    width:150px;
    text-align: center;
    height: 58px;
    line-height: 250%;
    background: black;
    border-radius: 10px;

}

.nav .nav-container ul li a:hover{
    background:#FF9900;
    color: white;
    border-radius: 10px; 
}

.main-body{
    width: 960px;
    background: white;
    margin:0 auto;
    min-height: 700px;
}

.article-area{
    width: 600px;
    min-height: 700px;
    float: left;
    margin: 20px;
    margin-bottom: 0px;
}

.sidebar-area{
    width: 280px;
    min-height: 400px;
    background: green;
    float: right;
    margin: 20px;
}

.article{
    padding: 10px;
    border: 1px solid white;
    background: #FAFAF8;
    box-shadow: 0.5px 0.5px 4px black;
    margin-bottom: 20px;
    border-radius: 5px;
}

.article p{
    width: 550px;
}

.article img{
    float: right;
    overflow: auto;
    margin-left: 10px;
}

.article h3{
    padding: 10px;
    font-size: 26px;
    padding: 3px;
    margin:0px;
}

.upper-footer{
    width: 100%;
    height: 250px;
    background: black;
}

Answer 1

首先没有理由加上display: none。使用淡入就足够了。其次，每次滚动你都在执行这个功能！这是不行的。相反，我们可以添加一些额外的逻辑来确保我们不会无休止地执行回调，但前提是导航元素的状态发生变化。此外，我们可以不使用 display: none / display: block，而是 fadeOut(0).fadeIn('fast')，因为动画队列在 jquery 中是同步的。最后，您错误地得到 window.height() 并从中减去任意值 70。相反，您应该测试 scrolltop 与 header 容器的高度，即 160px。在第二个条件 if 中，我们需要将 header 容器的高度加 1，以确保向上滚动时固定的 class 被移除。

$(document).ready(function(){
    $(".nav").slideDown(800);

    $(window).on('scroll',function(){
        //var navHeight = $(window).height() - 70;
        if ( $(window).scrollTop() > $('.header-container').height() && $('.nav:not(.fixed)').length ){
            $('.nav').addClass('fixed').fadeOut(0).fadeIn('fast');
        }
        else if( $(window).scrollTop() < $('.header-container') + 1 && $('.nav.fixed').length ){
            $('.nav').removeClass('fixed').fadeOut(0).fadeIn('fast');
        }
    });

});

fiddle

Answer 2

菜单修复的迟滞版本：

$(document).ready(function(){
$(".nav").slideDown(800);

// glueMenu use for hysteresis, jittery in transition.
// also, want outside callback for persistance.
var gluedMenu = false;

$(window).on('scroll',function(){

    // glue on when scroll past header container plus your fixed position in CSS
    var navHeight1 = $('.header-container').height() + 70;

    // unglue when scroll past returns back 10 pixels after fixed position
    var navHeight2 = $('.header-container').height() + 60;

    if ( $(window).scrollTop()> navHeight1 ) {
      if (gluedMenu == false) {
        gluedMenu = true;
        $('.nav').addClass('fixed');
        $('.nav').css("display","none");
        $('.nav').fadeIn("fast");
      }
    }
    else if ( $(window).scrollTop() < navHeight2 ) {
      if (gluedMenu == true) {
        gluedMenu = false;
        $('.nav').removeClass('fixed');
        $('.nav').css("display","block");
      }
    }
});

});

使用 jquery 修复顶部菜单。向下滚动时菜单不会稍后出现？

Fixing menu on top with jquery. menu doesn't appears later when scrolled down?

jquery

header

navigation