如何滚动到固定导航的锚链接

Question

我在顶部有一个固定的标题，主要区域有6个部分，每个部分有100％的宽度和高度。我的问题是：

1. 有没有办法让主区域覆盖所有6个区域的高度？

2. 滚动到与其关联的部分时，如何突出显示该菜单项？

欢迎任何建议。非常感谢你的帮助。

＆＃13;
＆＃13;
* {
    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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

该解决方案使用 viewport units 设置标题的height，即height:20vh，每个部分设置为height:80vh，它一起显示为已完整视口高度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>