javascript - 滚动后如何停止导航栏?

标签 javascript html css

HTML:

<div class="navigation-bar">
    <div class="item">Home</div>
    <div class="item">About us</div>
    <div class="item">Our Services</div>
    <div class="item">Contact us</div>
</div>

CSS:

.navigation-bar {
    background: black;
    width: 100%;
    margin: 0px;
    height: 70px;
    position: sticky;
}
.f-nav{  /* To fix main menu container */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
.item {
    float: left;
    width: 20%;
    height: 100%;
    color: white;
    text-align: center;
    font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    font-size: 26px;
    font-weight: 100;
    padding-top: 20px;
}

js文件:

$("document").ready(function ($) {
    var nav = $('.navigation-bar');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

这是我的代码,但它不起作用。我不知道如何在到达顶部时停止导航栏。我觉得代码没问题,就是不知道为什么不行。

最佳答案

    <script>
       $(document).ready(function(){
           $(window).bind('scroll', function() {
           var navHeight = $( window ).height() - 70;
                 if ($(window).scrollTop() > navHeight) {
                     $('nav').addClass('fixed');
                 }
                 else {
                     $('nav').removeClass('fixed');
                 }
            });
        });
    </script>
.fixed {
    position: fixed; 
    top: 0; 
    height: 70px; 
    z-index: 1;
}

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

关于javascript - 滚动后如何停止导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30451321/

相关文章:

javascript - HTML/CSS/JS - 如何使用 setInterval 更改文本?

javascript - Bootstrap Popover 下的 Highchart 数据渲染

javascript - 如何将用户名字段中输入的文本复制到密码字段以使它们相同?

javascript - 算术运算的右侧必须是类型 'any' 、 'number' 或枚举类型

php - 无法将 php 服务器响应转换为 html5 OpenFL haxe 应用程序

javascript - 另一个 div 内的固定 div

Javascript 从单个下拉列表填充 2 个文本框

css - div 填充屏幕剩余空间

HTML 边栏出现在底部而不是右侧

css - Robot Framework - 在动态网络应用程序上使用的最佳元素