使用 JavaScript 的粘性导航有问题

Question

我在自定义页面上的导航位于 header 照片下方。当页面滚动时，我希望导航保持在顶部。但是，我无法让它保持在固定位置。我觉得我已经尝试了一切。想知道我的代码中是否有某些内容与脚本冲突而不允许它运行。

<div id="header">
    <img src="images/header-1.jpg" style="max-width:100%; height:auto;"/>
</div>
<div id="headerTitle">
    <h2>header</h2>
    <h3><em>subhead</em></h3>
</div>   
<nav id="navbar">
    <div id="enter">
        <div class="numberCircle"><span>5</span></div>
        <div class="pg-nav">
            <ul class="nav-links">
                <li><a href="#a">A</a></li>
                <li><a href="#b">B</a></li>
                <li><a href="#c">C</a></li>
                <li><a href="#d">D</a></li>
            </ul>
        </div>
    </div>
</nav>

<style>
#navbar {
letter-spacing: 1px;
margin: 20px 0 20px 0;
width: 100%;
}
.fixedtop {
position: fixed;
z-index: 100;
width: 100%;
top: 0;
}
#enter {
background-attachment: scroll;
background-clip: border-box;
background-color: #696969;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 30px;
line-height: 10px;
padding: 10px;
text-align: center;
border-bottom: #97233f solid 2px;
/* width: 100%; */
/* z-index: 9999; */
}
.pg-nav {
width: 100%;
margin: 0 auto;
text-align: left;
}
.pg-nav ul {
list-style-type: none;
margin: 0 0 0 10px;
padding: 0;
overflow: hidden;
position: relative;  
display: inline-block;    
}
.pg-nav li {
float: left;
padding: 12px;
font-weight: 900;
}
.pg-nav li a {
display: block;
font-family: "Lato",sans-serif;
color: #fff;
font-size: 11px;     
font-weight: 900;
text-decoration: none;
text-transform: uppercase;      
}
@media (max-width: 500px) {
.pg-nav li {width:100%; padding:5px;}
}
.pg-nav li a:hover {
color: #97233f; 
}
.numberCircle {
border-radius: 50%;
width: 28px; 
font-size: 21px;
border: 2px solid #fff;
float: left;
}
.numberCircle span {
text-align: center;
line-height: 28px;
display: block;
color: #fff;
}
</style>

<script>
$(function() {
var distance = $('#navbar').offset().top,
$window = $(window);

$window.scroll(function() {
$('#navbar').toggleClass('fixedtop', $window.scrollTop() >= distance)
});
});
</script>

Answer 1

据我了解，最终目标是 navbar 固定在页面顶部，即使在滚动时也是如此？

我提出的解决方案可能看起来相当琐碎，但我建议更改 HTML.

中 navbar 和 header 的顺序

可能的解决方案：

HTML

<nav id="navbar">
    <div id="enter">
        <div class="numberCircle"><span>5</span></div>
        <div class="pg-nav">
            <ul class="nav-links">
                <li><a href="#a">A</a></li>
                <li><a href="#b">B</a></li>
                <li><a href="#c">C</a></li>
                <li><a href="#d">D</a></li>
            </ul>
        </div>
    </div>
</nav>

<div id="header">
     <img src="images/header-1.jpg" style="max-width:100%; height:auto;"/>
</div>

<div id="headerTitle">
     <h2>header</h2>
     <h3><em>subhead</em></h3>
</div>

结果

如果我不太理解问题的前提，请纠正我。

Answer 2

我将脚本 src 标签从标签底部移到了，这奏效了。我能够将导航栏保持在 header 图形和图像下方。

使用 JavaScript 的粘性导航有问题

Trouble With Sticky Nav Using JavaScript

html

javascript

css

jquery

nav

可能的解决方案：