고정 된 상단 탐색 요소 및 앵커

Question

다음 CSS에서는 앵커 링크가 탐색 막대에 의해 숨겨집니다.

앵커 링크 텍스트 바로 아래에 어떤 해결책을 제안하셨습니까?

/* style and size the navigation bar */ 
table.navigation#top 
{ 
    position: fixed; 
    margin-top: 0; 
    margin-bottom: 0; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 

감사

Answer 1

는 네비게이션 바의 높이를 일치 padding-top이있는 용기의 내부 탐색 줄을 넣습니다.

귀하는 또한 귀하의 링크가 내비게이션 막대의 높이와 일치하는 top을 제공 할 수 있어야합니다. position: relative

Answer 2

당신은 (당신이 이미하고있는대로) position:fixed 및 top:0과 장소에 네비게이션 바에을 해결하고, 주어진 값의 height를 설정 한 다음 목표 앵커의 각각의 padding-top 속성에 같은 값을 적용 할 수 있습니다.

이렇게하면 탐색 링크를 클릭 할 때 앵커 요소의 상단이 브라우저의 뷰포트 상단으로 이동하고 탐색 막대가 부분적으로 덮일 때까지 (z-index:1이 탐색 막대에 설정되어 있기 때문에)),이 덮여있는 부분은 내용이없는 패딩 영역이되며 일반적으로 보이지 않습니다 (테두리 나 배경색이 추가되지 않는 한). 따라서 콘텐츠는 탐색 표시 줄 바로 다음에서 올바르게 시작됩니다.

여기 예제 코드입니다 :

• CSS :

  #navbar 
  { 
      position: fixed; 
      top: 0; 
      z-index: 1; 
      height: 1em; 
      margin: 0; 
  } 
  
  .heading 
  { 
      padding-top: 1em; 
  } 
  

• HTML :

  <div id="content"> 
      <h2 id="one" class="heading">Section 1</h2> 
      ... 
      <h2 id="two" class="heading">Section 2</h2> 
      ... 
      <h2 id="three" class="heading">Section 3</h2> 
      ... 
  </div> 
  <div id="navbar"> 
      <a href="#one">Section 1</a> 
      <a href="#two">Section 2</a> 
      <a href="#three">Section 3</a> 
  </div> 
  

는 물론, 이것은 동적 메뉴 바의 높이의 문제가 해결되지 않습니다, Bryan이 JavaScript를 사용한다는 제안은 아마도 이것을 구현하는 가장 쉬운 방법 일 것입니다.

ps - id'd 요소에 display:block 또는 display:inline-block이있는 경우 패딩이 페이지 레이아웃에 영향을 미치므로 바람직하지 않을 수 있습니다.

Answer 3

here을 보면 방법 D가 내 문제를 해결합니다. CSS는 기본적으로 다음과 같습니다.

#method-D { 
    border-top:50px solid transparent; 
    margin-top:-50px; 
    -webkit-background-clip:padding-box; 
    -moz-background-clip:padding; 
    background-clip:padding-box; 
} 

동적 인 탐색 막대를 사용하여 숨겨진 상태로 고정됩니다.