如何使用固定導航滾動到錨鏈接

Question

我在頂部有一個固定標題，內部有6個部分，每個部分都有100％的寬度和高度。我的問題是：

1. 有沒有辦法讓高度的主要區域覆蓋所有6個部分？

2. 如何在滾動到鏈接的部分時突出顯示菜單項？

歡迎任何建議。非常感謝你的幫助。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#headerArea { 
 
    width: 100%; 
 
    height: 150px; 
 
    background: #000; 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 2; 
 
} 
 
#gnavArea { 
 
    width: 880px; 
 
    height: inherit; 
 
    float: left; 
 
    position: relative; 
 
} 
 
#gnavArea > ul { 
 
    list-style: none; 
 
    position: absolute; 
 
    bottom: 12px; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 
#gnavArea > ul li { 
 
    float: left; 
 
    padding: 0 5px; 
 
    position: relative; 
 
    border-bottom: 2px solid; 
 
} 
 
#gnavArea > ul li a { 
 
    font-size: 14px; 
 
    font-family: Arial; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#mainArea { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#section_01, #section_02, #section_03, 
 
#section_04, #section_05, #section_06 { 
 
    background-size: 100% 100%; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#section_01 { 
 
    background: grey; 
 
} 
 
#section_02 { 
 
    background: yellow; 
 
} 
 
#section_03 { 
 
    background: brown; 
 
} 
 
#section_04 { 
 
    background: blue; 
 
} 
 
#section_05 { 
 
    background: green; 
 
} 
 
#section_06 { 
 
    background: red; 
 
}

<div id="headerArea"> 
 
    <div id="gnavArea"> 
 
     <ul> 
 
      <li><a href="#section_01">section_01</a></li> 
 
      <li><a href="#section_02">section_02</a></li> 
 
      <li><a href="#section_03">section_03</a></li> 
 
      <li><a href="#section_04">section_04</a></li> 
 
      <li><a href="#section_05">section_05</a></li> 
 
      <li><a href="#section_06">section_06</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
<div id="mainArea"> 
 
    <div id="section_01">1</div> 
 
    <div id="section_02">2</div> 
 
    <div id="section_03">3</div> 
 
    <div id="section_04">4</div> 
 
    <div id="section_05">5</div> 
 
    <div id="section_06">6</div> 
 
</div>

Answer 1

該解決方案使用viewport units用於設置頭即height:20vh並且每個部分height:80vh的height，一起它顯示視口的100vh全高度。

然後，加入<span>每個部分<div>以上，並設置height和margin-top數字基於報頭的height用於創建偏移量，也分配了部分的ID給他們。因此，當瀏覽導航鏈接時，它會跳轉到正確的位置。

的jsfiddle：http://jsfiddle.net/1dx5he8r/

$(document).ready(function() { 
 
    $('#nav li:first-child a').addClass('active'); 
 
}); 
 

 
$(window).on('scroll', function() { 
 
    $('#main > span').each(function() { 
 
     if($(window).scrollTop()+1 >= $(this).offset().top) { 
 
      var id = $(this).attr('id'); 
 
      $('#nav a').removeClass('active'); 
 
      $('#nav a[href=#'+ id +']').addClass('active'); 
 
     } 
 
    }); 
 
});

body { 
 
    font-family: sans-serif; 
 
    margin: 0; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: #000; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 
#nav { 
 
    list-style: none; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#nav li { 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
} 
 
#nav a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#nav .active { 
 
    color: red; 
 
} 
 
#main > span { 
 
    display: block; 
 
    height: 20vh; /*same height as #header*/ 
 
    margin-top: -20vh; /*same height as #header*/ 
 
    visibility: hidden; 
 
} 
 
#main > span:first-child { 
 
    margin-top: 0; 
 
} 
 
#main > div { 
 
    height: 80vh; 
 
} 
 
#section_01 + div { 
 
    background: silver; 
 
} 
 
#section_02 + div { 
 
    background: lime; 
 
} 
 
#section_03 + div { 
 
    background: yellow; 
 
} 
 
#section_04 + div { 
 
    background: fuchsia; 
 
} 
 
#section_05 + div { 
 
    background: aqua; 
 
} 
 
#section_06 + div { 
 
    background: teal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <ul id="nav"> 
 
     <li><a href="#section_01">section_01</a></li> 
 
     <li><a href="#section_02">section_02</a></li> 
 
     <li><a href="#section_03">section_03</a></li> 
 
     <li><a href="#section_04">section_04</a></li> 
 
     <li><a href="#section_05">section_05</a></li> 
 
     <li><a href="#section_06">section_06</a></li> 
 
    </ul> 
 
</div> 
 
<div id="main"> 
 
    <span id="section_01"></span> 
 
    <div>1</div> 
 
    <span id="section_02"></span> 
 
    <div>2</div> 
 
    <span id="section_03"></span> 
 
    <div>3</div> 
 
    <span id="section_04"></span> 
 
    <div>4</div> 
 
    <span id="section_05"></span> 
 
    <div>5</div> 
 
    <span id="section_06"></span> 
 
    <div>6</div> 
 
</div>