html - 如何滚动以固定导航 anchor 定链接

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


有没有办法使主要区域的高度覆盖所有6个部分？
滚动到链接到的部分时，如何突出显示菜单项？


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

* {
    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>

最佳答案

该解决方案使用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>

关于html - 如何滚动以固定导航 anchor 定链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30090627/