Question

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

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

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

来自JS小提琴的代码：

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://jsfiddle.net/fcro6mth/4/

<强>解决方案

我把你的部分包裹在div-wrappers中给了他们身份证，把它们填上来并以负边距将它们拉回来。

这会产生完全相同的外观，但链接会按照您的要求执行。

示例：

HTML: <div id="section1" class="wrapper"> <section >This is section one</section> </div> CSS: .wrapper { padding-top: 50px; margin-top: -50px; }

Answer 2

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

制作用于抵消各个部分的隐藏锚点的好例子。

Answer 3

我在设计一个网页时遇到了很多困难，这个网页的页面顶部有一个大约300px的组合横幅/导航栏，其中包含链接到网站主页的锚点链接的短项目。

我使用“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>

...等

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

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

3 个答案: