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

有没有解决这个问题的方法：在一个包含TOC（目录）的页面上，链接指向同一页面内的hashtags，当浏览器向下滚动时，其他固定位置元素会将其隐藏。浏览器应进一步向下滚动，以避免被固定元素隐藏

用小提琴演示这个问题：单击第一节或第二节-浏览器向下滚动到它，但它被固定的标题隐藏

JS解决方案：

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

来自JS fiddle的代码：

HTML:

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);
});

---

小提琴的更新版本：

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

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

解决方案

我用div包装器包装你的部分，给它们ID，填充它们，然后用负边距把它们拉回来

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

示例：

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

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

HTML：
这是第一节
CSS:
.包装纸{
填充顶部：50px；
利润上限：-50px；
}

检查以下内容：

---

制作隐藏锚定以抵消版面的效果是一个很好的例子。

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

我发现“

页边距顶部：-XXpx；padding top:XXpx

”方法存在的问题是，不可见的填充覆盖了前面的项，这意味着活动内容（即链接）被阻止。我通过将定位应用于锚定元素并设置z索引来克服这一问题，以便第一个项目位于堆栈顶部，而随后的每个项目位于堆栈下部，如下所示：

CSS

HTML

第一项
第二项
第三项

。。。等

---

这为我的桌面和iOS设备上的Firefox、Safari和Chrome提供了一个解决方案。我希望这能帮助其他人在bootstrap中解决这个非常令人沮丧的问题

那正是我想要的，谢谢！我也刚刚了解到：各部分之间的空间很大。我同意这是一个解决方案，如果空间是好的，但在我的情况下，它不是。。。解决方案取决于空间的存在。

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

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

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

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