javascript - HTML + JS - float 标题栏的变体和指向命名 anchor 错误的链接

Question

我有一个带有 float 标题栏的网站。 (下面的代码)我已经解决了您希望我询问的问题，但我还有另一个问题。

一个常见的问题是，当您单击页面中指向 anchor 的链接时，标题栏会覆盖所需的目的地，即 anchor #part2。这是一个有很多解决方案的已知问题。 (例如 This stack question)我的解决方案是简单地将 anchor 向上移动。这行得通但是

• 如果您粘贴 http://server/page.html#part2链接到浏览器地址栏，它有效。
• 如果您单击页面内指向 anchor 的链接，则偏移量不会生效。我相信这是因为当我们点击 #part2 链接时，浏览器会说“好的，我必须向下滚动到 #part2。让我的计算机在哪里#第 2 部分是。它位于 y=1,200 像素处。” (组成数字)。但是，当滚动开始时， float 标题 div 元素会 float 到相对位置，并且 1,200 像素数会超出。

请在此处查看完整示例:https://jsfiddle.net/smorton/7p431smr/

我怀疑我的解决方案是找到另一种方法使标题栏 float ，或者找到某种方法在 scroll() 函数中重新计算页面偏移量。但我需要有关这些或替代解决方案的帮助。

更新

我没有明确说明，但对我来说重要的是，当页面滚动到顶部时， float 标题栏不位于页面顶部。就像在我的 jsfiddle 示例中一样。想象一下，这个 Stack 页面在顶部看起来很正常，但是当你向下滚动时，一个小栏说“HTML + JS - float 标题栏上的变体和指向命名 anchor 错误的链接”跟着你向下滚动。我认为，目前提供的解决方案依赖于将标题栏放在最顶部，这不是我想要的。

解决方案

好吧，最后我只是在固定 40px 高度的标题栏周围放置了另一个 div，这样即使弹出标题栏，40px 仍然保留。

html:

<div id=header_placeholder>
<div id=floatbar class=header> This is the header bar<br>It will follow as you scroll</div>
</div>

CSS:

#header_placeholder {height: 40px;}

---

float 标题栏 jquery 1.11 代码:(请首选 jsfiddle 链接)

$(window).scroll(function(){

    if ($(window).scrollTop() >= 100)
    {
        $("#floatbar").css({position:'fixed',top:'0'});
        $(".summary").css({margin: '0'});
    }
    else
    {
        $("#floatbar").css({position: 'relative'});
        $(".summary").css({margin: '8 px 0'});
    }
});

Answer 1

这似乎有效:https://jsfiddle.net/z8s7gugz/1/

这种方法的一个缺点是滚动条也不能覆盖标题的空间。在示例中，它从顶部开始 40 像素。

body { padding: 0; margin: 0; }
.header {
  height: 40px;
}
.scrollcontent {
  position: absolute; /* I'm not sure why this is needed, Chrome wont do the overflow without it */
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
}

<div class="header"> This is the header bar<br>It will follow as you scroll</div>
<div class="scrollcontent">
  [content]
</div>

不需要任何 JavaScript，except for perhaps a fallback for the css calc .