Question

我正在试图弄清楚如何为网站设计一个标题，以便在标题下面放置标签（看起来它们从标题下方伸出），保留标题作为页面向下滚动（标题向上移动），但是当它们到达页面顶部时会固定在那里，以便它们始终可见。

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

我需要的是使用CSS和/或JavaScript的解决方案。有谁知道这样做的方法？

Answer 1

请参阅此SO问题和答案

Answer 2

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

<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

<{3}}，Remy Sharp和Left Logic提供了类似 -ish 主题的教程： jQuery for Designers。

这将模拟来自fixed-floating-elements的购物篮（点击要配置的产品，并在滚动页面时观看摘要/规格框）涵盖了您需要了解的所有内容以使技术适应符合您自己的要求。

显然，从URL到网站，它确实需要（或者至少使用）jQuery，而不是普通的Javascript。

Answer 4

我不认为你只能用css做到这一点，正如SLaks所说。即使有一些我不知道的条件陈述或黑客的方式，我也不会这样做，因为主要有两个原因：

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

使用javascript，我建议使用onScroll和scrollHeight更新标签css，当它们位于页面顶部时。

Answer 5

您可以查看具有标签插件的jQuery UI，并且您可以在短搜索后找到许多使用的示例。

Answer 6

在我添加这个“z-index：999;”

之前，我的工作不是很好

将标签固定到页面顶部，但在标题下方

6 个答案: