스티키 내비게이션 문제 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> 

결과

---

질문의 전제를 이해하지 못했다면 나를 수정하십시오.

Answer 2

태그의 하단에서부터 스크립트 src 태그를 옮겨서 작동했습니다. 헤더 그래픽과 이미지 아래에 navbar를 유지할 수있었습니다.