个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 02:58:25 25 4
gpt4 key购买 nike

基本上，当导航栏(或任何元素)到达页面或窗口的顶部时，它会向该元素添加一个粘性类，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/

25 4 0
文章推荐： c - 在 C 中构建格式字符串
文章推荐： python - 玛雅 : ScriptNode pop up menu with error "invalid directive"
文章推荐： c - 简单的 Linux shell 。停止命令
文章推荐： javascript - Socket.io 发送到特定客户端
太空宇宙
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com