自定義頁面上的我的導航欄位於標題照片下方。當頁面滾動時，我想讓導航在頂部保持粘性。但是，我無法讓它保持固定的位置。我覺得我已經嘗試了一切。不知道我的代碼中的某些內容是否與腳本衝突而不允許它運行。使用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粘滯導航的問題

回答

潛在的解決方案：

相關問題