如何在不使用 JS 的情况下使用 TOC 滚动页面上的固定位置元素？答案

【问题标题】：How to scroll beyond fixed position elements on a page with TOC without using JS?如何在不使用 JS 的情况下使用 TOC 滚动页面上的固定位置元素？
【发布时间】：2015-07-14 19:23:24
【问题描述】：

如何解决此问题的任何想法：在带有指向同一页面内标签的链接的 TOC（目录）的页面上，当浏览器向下滚动时，其他固定位置元素会隐藏它。浏览器应进一步向下滚动以避免被固定元素隐藏。

演示这个问题的小提琴：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);
});

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

制作隐藏锚点以抵消您的部分的好例子。

【讨论】：

这正是我想要的，谢谢！我也刚到：jsfiddle.net/fcro6mth/5

【解决方案2】：

你的小提琴的更新版本：

https://jsfiddle.net/fcro6mth/4/

解决方案

我将您的部分包装在 div-wrappers 中，给了它们 ID，将它们向下填充并以负边距将它们拉回。

这会产生完全相同的外观，但链接会执行您希望它们执行的操作。

示例：

HTML:
<div id="section1" class="wrapper">
    <section >This is section one</section>
</div>

CSS:
.wrapper {
  padding-top: 50px;
  margin-top: -50px;
}

【讨论】：

部分之间有很多空间。如果那个空间没问题，我同意它是一个解决方案，但在我的情况下它不是......而且解决方案取决于那个空间在那里。

【解决方案3】：

在设计一个网页时，我一直在努力解决这个问题，该网页在页面顶部固定了一个大约 300 像素的组合横幅/导航栏，其中充满了通过网站主页的锚链接链接到的短项目。

我发现“margin-top: -XXpx; padding-top: XXpx”方法的问题是不可见的填充覆盖了前面的项目，这意味着活动内容（即链接）被阻止了。我通过对锚定元素应用定位并设置 z-index 来克服这个问题，以便第一项位于堆栈顶部，而每个后续项目位于堆栈的下方 - 如下所示：

CSS

.anchored-element {
padding-top: 300px;
margin-top: -300px;
position: relative;
}

HTML

<div class="anchored-element" style="z-index: 99">FIRST ITEM</div>
<div class="anchored-element" style="z-index: 98">SECOND ITEM</div>
<div class="anchored-element" style="z-index: 97">THIRD ITEM</div>

...等

这提供了一个修复程序，它适用于我桌面上的 Firefox、Safari 和 Chrome，以及我的 iOS 设备上。我希望这可以帮助其他人在引导程序中解决这个非常令人沮丧的问题！

【讨论】：