javascript - 粘性导航栏技巧(jquery 已修复)-6ren

javascript - 粘性导航栏技巧(jquery 已修复)

转载作者：太空宇宙更新时间：2023-11-04 02:58:25

基本上，当导航栏(或任何元素)到达页面或窗口的顶部时，它会向该元素添加一个粘性类，CSS 会使其固定。用作 IF 语句，因此当它不在顶部附近时，它会删除该类，使其恢复正常。

我已正确完成所有代码，对所有内容进行双重和三次检查。在 Chrome 上的开发者工具中，我可以看到 jQuery 正在正确地完成它的工作，在正确的时间添加和删除类，只是 CSS 似乎不起作用。

$(document).ready(function() {
    
    var stickyNavTop = $('nav').offset().top;
    
    var stickyNav = function() {
        
        var scrollTop = $(window).scrollTop();
        
        if (scrollTop > stickyNavTop) {
            
            $('nav').addClass('sticky');
            
        } else {
            
            $('nav').removeClass('sticky');
        
        }
    };
    
    stickyNav();
    
    $(window).scroll(function() {
        stickyNav();
    });
});

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetice Neue", sans-serif;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeue.otf");
}

html, body {
    width: 100%;
    height: 100%;
}

div#container {
    width: 100%;
    height: 100%;
}

div#content {
    width: 100%;
    height: 100%;
}

section#main-bg {
    width: 100%;
    height: 100%;
}

#main-bg img {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -9999; /* always on bottom */
}

nav {
    width: 100%;
    height: 60px;
    bottom: -60px;
    background-color: #333333;
}

/* nav */ .sticky {
    position: fixed;
}

nav ul {
    float: right;
}

nav ul li {
    float: left;
    margin-left: 40px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 20px;
    line-height: 60px;
}

div#content {
    width: 100%;
    height: 2000px;
    background-color: #dedede;
    bottom: 0;
}

<!DOCTYPE html>
<html>
    <head>

        <title>Josh Murray | My Personal Page</title>    
        <meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/main_styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="scripts/homemadeSticky.js"></script>
    
    </head>
    
    <body>
        
        <div id="container">
                
                <section role="banner" id="main-bg">
                    
                    <!-- this is where the full screen image will be -->
                    
                    <img src="img/bg.jpg">
                    
                </section>
                
                <nav>
                    
                    <ul>
                        
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        
                    </ul>
                    
                </nav>
                
                <div id="content">
                    
                    <!-- content in here -->
                    
                </div>
            
        </div>
        
    </body>

</html>

提前致谢

最佳答案

你的css没有告诉它固定在哪里，只是把它改成

.sticky {
    position: fixed;
    top: 0;
}

$(document).ready(function() {
    
    var stickyNavTop = $('nav').offset().top;
    
    var stickyNav = function() {
        
        var scrollTop = $(window).scrollTop();
        
        if (scrollTop > stickyNavTop) {
            
            $('nav').addClass('sticky');
            
        } else {
            
            $('nav').removeClass('sticky');
        
        }
    };
    
    stickyNav();
    
    $(window).scroll(function() {
        stickyNav();
    });
});

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetice Neue", sans-serif;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeue.otf");
}

html, body {
    width: 100%;
    height: 100%;
}

div#container {
    width: 100%;
    height: 100%;
}

div#content {
    width: 100%;
    height: 100%;
}

section#main-bg {
    width: 100%;
    height: 100%;
}

#main-bg img {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -9999; /* always on bottom */
}

nav {
    width: 100%;
    height: 60px;
    bottom: -60px;
    background-color: #333333;
}

/* nav */ .sticky {
    position: fixed; top: 0;
}

nav ul {
    float: right;
}

nav ul li {
    float: left;
    margin-left: 40px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 20px;
    line-height: 60px;
}

div#content {
    width: 100%;
    height: 2000px;
    background-color: #dedede;
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>

        <title>Josh Murray | My Personal Page</title>    
        <meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/main_styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="scripts/homemadeSticky.js"></script>
    
    </head>
    
    <body>
        
        <div id="container">
                
                <section role="banner" id="main-bg">
                    
                    <!-- this is where the full screen image will be -->
                    
                    <img src="img/bg.jpg">
                    
                </section>
                
                <nav>
                    
                    <ul>
                        
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        
                    </ul>
                    
                </nav>
                
                <div id="content">
                    
                    <!-- content in here -->
                    
                </div>
            
        </div>
        
    </body>

</html>

关于javascript - 粘性导航栏技巧(jquery 已修复)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31753148/

文章推荐： c - 在 C 中构建格式字符串

文章推荐： python - 玛雅 : ScriptNode pop up menu with error "invalid directive"

文章推荐： c - 简单的 Linux shell 。停止命令

文章推荐： javascript - Socket.io 发送到特定客户端

javascript - 修复 IE 的 div 宽度 @media 修复
我将一个 div 设置为 100% 宽度，当以 1024 分辨率查看页面时，宽度应从 100% 变为 1000px，我让它与@media 查询一起正常工作，并且在 FF、safari chrome 上
ckeditor - Domino 9.01 修复 3 CKEditor 错误 - 9.01 修复 1 上没有错误
希望有人能帮助我，我已经被困了几天了。将我的 Domino 服务器更新到 9.01 Fix 3 后，我在 javascript 控制台上不断收到错误消息: TypeError: this.edito
Java内存使用/修复
我们正在使用一个基于RMI的java应用程序。当我们运行应用程序时，即使应用程序处于理想阶段，内存使用量仍然不断增加。我们主要使用Vector和散列图数据结构。如何最大限度地减少java内存使用/修复
修复 IDM下载器假序列号错误优秀技巧分享
概述 Internet Download Manager (IDM)是最流行的 Windows 下载管理器。如果你平时工作中使用过IDM,您会惊叹 IDM 下载文件的速度有多快。IDM
authorization - 打开勇敢的浏览器时弹出错误？修复？
当我打开 brave 浏览器时，会打开一个窗口(如下所示)。它并没有真正干扰浏览器的处理。但令人担忧的是为什么这种情况一直发生...... Error On Opening Brave Browser
for-loop - 修复 For 循环中的错误
这是我今天在求职面试中被问到的一个问题: 看下面的代码: int n=20; for (int i =0; i
macports 修复/替换命令？
我不小心删除了/opt/local/bin/perl5.8.9 ，这似乎是 macports 编译的 perl 的主要二进制文件。现在我有很多取决于 perl5 的端口，但不想卸载并重新安装所有端口
haskell - 翻转修复/修复
>>>flip fix (0 :: Int) (\a b -> putStrLn "abc") Output: "abc" 这是使用翻转修复的简化版本。我在一些 YouTube 视频中看到了这种使用
java - 修复 NetworkOnMainThreadException
这个问题已经有答案了: How can I fix 'android.os.NetworkOnMainThreadException'? (64 个回答) 已关闭 3 年前。我在 Android 应
python - 修复 UnboundLocalError
def main(): cash = float(input("How much money: ")) coins = 0 def changeCounter(n): whil
mysql - 查询优化/修复
前一周我遇到了类似的问题，查询需要永远运行。在编写此查询时，我尝试应用从其他查询中学到的一些知识，但执行起来需要很长时间。运行查询的两个单独部分时，每个部分需要 2 分钟才能完成，这是可以接受的，但
CSS 'Dropdown' 修复
下午，我的 CSS 有问题。第三个下拉菜单放错了，我没有解决办法。这是我想要的: 之前: http://i53.tinypic.com/2qu85z8.png 之后: http://i51.tiny
ios - NSInternalInconsistencyException 修复
更新方法: override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingS
导航栏折叠的 CSS 修复
我知道这是一个很多人都遇到过的问题，但我不熟悉 Less 并且是 Bootstrap 的新手，我正在寻找一种全 CSS 解决方案来防止我的导航栏折叠到 768 像素以下:
javascript - 可调整大小的粘性页脚与内容重叠 - 修复
在我的布局中，我创建了以下 jsfiddle 托管的可调整大小的粘性页脚。但是，在调整大小时它与内容重叠。有没有办法让它在所有浏览器上都能响应？ http://jsfiddle.net/9aLc0mg
javascript - 修复 if 语句以停止移动
我想要实现的目标 racer-offset 是为了让用户可以设置图像可以以 px 为单位移动多远。偏移量管理偏移量。 Speed-racer 告诉我们图像在滚动过程中移动的速度。我的问题是它不会停止。
c++ - 修复/改进自动换行功能
我有一个简单的自动换行函数，它接受一个长字符串作为输入，然后将该字符串分成更小的字符串，并将它们添加到一个数组中，以便稍后输出。现在最后一两个字没有输出。这是主要问题。但是，我还想改进功能。我知道这有
禁用按钮的 JQuery 修复
我试图在使用每个 slider 之前禁用“下一步”按钮，我不确定为什么在单击不再是 class="not-clicked"的同一个 slider 时取消禁用该按钮. JSFiddle: (这里看起来有
java - 修复 NullPointerException？
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 8 年前。如何让程序输出所有信息？ IT
菜单鼠标悬停的 CSS 修复
On this page ，在“生活”下有一个带有自动生成的子菜单的菜单。子菜单存在一些问题(它会闪烁并改变大小——如果你滚动它就会看到)。我需要以某种方式覆盖它当前正在读取的 css 并使其统一。

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 粘性导航栏技巧(jquery 已修复)