Sticky NavのトラブルJavaScriptを使用して

Question

カスタムページ上での私の移動はヘッダー写真の下にあります。ページがスクロールすると、上部にスティッキーが残るようにします。しかし、私はそれを一定の位置にとどめることはできません。私はすべてを試したような気がする。私のコード内の何かがスクリプトと矛盾していてスクリプトが機能しないのであれば驚いています。

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

RESULT

---

私は質問の前提をかなり理解していない場合は、私を修正してください。

Answer 2

スクリプトのsrcタグをタグの末尾からtheタグに移動しました。私はヘッダーのグラフィックとイメージの下にnavbarを保つことができました。