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

<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>

来源

2016-12-29 user6301101

你有包含jquery吗？ – Nora

你需要添加'margin-top：0！important';'class.fixedtop'样式定义 – Banzay

是的jquery-3.1.1.min.js和jquery-3.1.1.js – user6301101

所以据我了解的终极目标是拥有一个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>

RESULT

如果我不太明白问题的前提，请纠正我。

来源

2016-12-29 23:53:54

我将脚本src标记从标记的底部移动到了和那个工作。我能够将导航栏保留在标题图形和图像下方。

来源

2016-12-30 16:38:16 user6301101

使用JavaScript粘滞导航的问题

回答

潜在的解决方案：

相关问题