javascript - 如何在不使用 JS 的情况下滚动到 TOC 页面上的固定位置元素之外？

Question

关于如何解决此问题的任何想法:在包含指向同一页面内主题标签的链接的 TOC(目录)页面上，当浏览器向下滚动时，其他固定位置元素将其隐藏。浏览器应进一步向下滚动以避免被固定元素隐藏。

Fiddle 演示这个问题:https://jsfiddle.net/fcro6mth/单击第一部分或第二部分 - 浏览器向下滚动到它，但它被固定标题隐藏了

JS 解决方案:https://jsfiddle.net/fcro6mth/1/

你能想到任何不涉及 JS 的解决方案吗？

来自 JS fiddle 的代码:

HTML:

<header>
    This is the fixed position header
    <nav>
        <a href="#section1">Section One</a>
        <a href="#section2">Section Two</a>
        <a href="#section3">Section Three</a>       
    </nav>
</header>
<div class="body">
    This is the body.
    <section id="section1">This is section one</section>
    <section id="section2">This is section two</section>
    <section id="section3">This is section three</section>
</div>

CSS:

section {
    background: lightgrey;
    margin: 20px 0;
    padding: 20px 10px;
    height: 300px;
}

header {
    background-color: grey;
    position: fixed;
    top: 0;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    color: white;
}

.body {
    margin: 70px 10px 0 10px;
}

JavaScript:

$("nav a").click(function (event) {
    var $target = $(event.currentTarget),
        $scrollToTarget = $($target.attr("href")),
        $header = $("header"),
        prop = { 
            scrollTop:   $scrollToTarget.offset().top - $header.outerHeight(true)
        },
        speed = 1000;

    $('html, body').animate(prop, speed);
});

Answer 1

检查这个:https://stackoverflow.com/a/13555927/2112228

制作隐藏 anchor 以偏移您的部分的好例子。