将选项卡固定在页面顶部，但位于标题下方

Question

我正在尝试弄清楚如何为网站设计标题，以便在标题下方放置一些选项卡（看起来像是从标题下方伸出），当页面向下滚动时，这些选项卡与标题保持在一起（并且标题向上移动），但是当它们到达页面顶部时会固定在那里，以便它们始终可见。

我知道如何将元素固定到页面顶部，以便其始终可见，但是当标题位于窗口中时，我希望选项卡显示在其下方，而不是顶部。当标题离开页面时，选项卡仍然存在。

我需要的是使用 CSS 和/或 JavaScript 的解决方案。有谁知道有什么方法可以做到这一点？

Answer 1

请参阅此SO 问题和答案

Answer 2

基本方法是在页面加载时绝对定位元素，但在滚动时，将定位更改为固定（如果支持），或者将元素移动到适当的位置。

<div id="fix" style="position:absolute;top:30px;">
My fixedish div
</div>

还有一些快速的 js（应该清理以跨浏览器工作）：

// register event handler
window.addEventListner("scroll", function(){
    var div = document.getElementById("fix");  
    if (document.body.scrollHeight > 30) {
        // fix it to the top
        div.style.position = "fixed";
        div.style.top = "0px";
    }
    else {
        // position it below the header
        div.style.position = "absolute";
        div.style.top = "30px";
    }
});

Answer 3

Remy Sharp，来自 Left Logic 和 jQuery for Designers 提供了有关类似主题的教程：-ish a href="http://jqueryfordesigners.com/fixed-floating-elements/" rel="nofollow noreferrer" title="最后是教程本身的链接。">fixed-floating-elements 。

这模拟了 英国 Apple 商店（单击要配置的产品，并在滚动页面时观看摘要/规格框）几乎涵盖了您需要了解的所有内容，以适应技术以满足您自己的要求。

显然，从 URL 到站点，它确实需要（或者至少使用）jQuery，而不是纯 JavaScript。

Answer 4

您可以查看 jQuery UI，它有一个选项卡插件，在简短搜索后您可以找到许多使用示例。

Answer 5

我不认为你可以只使用 css 来做到这一点，正如 SLaks 所说。即使有某种我不知道的条件语句或黑客方法，我也不会这样做，主要有两个原因：

• 它肯定不适用于所有浏览器。
• 这当然不是合适的选择（语言应该与问题相匹配）。

使用 javascript，我建议使用 onScroll 和 scrollHeight 来更新位于页面顶部的选项卡 css。

Answer 6

直到我添加了这个“z-index: 999;”之后，我的才在下面工作。