Javascript없이 특정 지점 아래로 스크롤 할 때 정적 탐색 막대를 표시 할 수 있습니까?

Question

나는 things의 lots을 Javascript를 사용하여 찾았지만 HTML과 CSS만으로 가능했는지 궁금합니다. 특히, 상단 머리글을 스크롤 한 다음에 탐색 표시 줄을 표시합니다.

다음은 현재 사용중인 HTML 코드입니다.

<h1> 

<a class="border" href="http://example.com">home</a> <a class="border" href="forum">forum</a> <a class="border" href="links">links</a> <a class="border" href="contact">contact</a> <a class="border" href="contact/bio">bio</a> 

</h1> 
<div id="navigation"> 
<a href="http://example.com">Home</a> 
<a href="contact">Contact</a> 
<a href="forum">Forum</a> 
</div> 

그리고 여기에 CSS 코드가 있습니다. 이 부분이 맨 위 헤더입니다.

h1 { 
font-size:48px; 
text-align: center; 
color:#00F; 
border-style: solid; 
border-color: #360; 
-moz-border-radius: 30px; 
border-radius: 30px; 

} 

a:link { 
color: #00F; 
text-decoration: none; 
} 
a:visited { 
text-decoration: none; 
color: #00F; 
} 
a:hover { 
text-decoration: none; 
color: #006; 
} 
a:active { 
text-decoration: none; 
color: #000; 
} 
a.border { 
border-style: solid; 
border-color: #00F; 
border-width: 5px; 
-moz-border-radius: 15px; 
border-radius: 15px; 
} 

a.border:hover{ 
border-color:#006; 
} 
a.border:active { 
border-color: #000; 
} 

그리고이 부분은 정적 navbar CSS입니다.

#navigation { 
position: fixed; 
top: 0; 
width: 100%; 
color: #ffffff; 
height: 35px; 
text-align: center; 
padding-top: 15px; 
/* Adds shadow to the bottom of the bar */ 
-webkit-box-shadow: 0px 0px 8px 0px #000000; 
-moz-box-shadow: 0px 0px 8px 0px #000000; 
box-shadow: 0px 0px 8px 0px #000000; 
/* Adds the transparent background */ 
background-color: rgba(1, 1, 1, 0.8); 
color: rgba(1, 1, 1, 0.8); 
} 
#navigation a { 
font-size: 14px; 
padding-left: 15px; 
padding-right: 15px; 
color: white; 
text-decoration: none; 
} 

#navigation a:hover { 
color: grey; 
} 

Answer 1

대답은 더 없습니다 ..You는

는 이유

수 없습니다

• CSS는
• CSS 계산할 수 없으며, 해당 사용자를 감지 할 수있는 자바 스크립트되지는 스크롤 한 특정 통과 요소

그래서 사람들은 JavaScript를 사용하여 클라이언트 뷰포트 크기, 요소 크기 등과 같은 필요한 정보를 계산할 수 있고 원하는 결과가 사용자에게 던져 질 수 있습니다.