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

我想弄清楚如何为网站设计标题，以便在标题下面放置标签（看起来像是从中伸出在标题下），当页面向下滚动（并且标题向上移动）时，保持页眉不变，但是当它们到达页面顶部时，在页面顶部变得固定，以便它们始终可见。将标签固定到页面顶部，但在标题下方

我知道如何将一个元素固定到页面的顶部，以使其始终可见，但是当页眉位于窗口中时，我希望标签出现在其下方，而不是顶部。当标题离开页面时，标签将仍然存在。

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

来源

2010-02-28 JGDev

我不认为你可以在纯CSS中做到这一点。 – SLaks 2010-02-28 22:16:49

它肯定有助于知道你使用的是什么（x）html和doctype。而且，也许，css ... – 2010-02-28 22:24:50

我不认为你可以只用css来完成，就像SLaks说的那样。即使有条件声明或黑客的方式我不知道，我不会这样做，主要有两个原因：

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

使用javascript，我会建议使用onScroll和scrollHeight更新标签css，当他们在页面的顶部。

来源

2010-02-28 22:26:58 PvB

看到这个SO问题和答案

来源

2010-02-28 22:27:28

你可以看看其中有一个标签插件jQuery UI的，有使用的，你可以找到后小号短搜索的例子很多。

来源

2010-02-28 22:28:19

阅读问题。这不是他要求的。 – SLaks 2010-02-28 23:06:36

基本的方法是在页面加载时定位元素，但在滚动时，如果支持将定位更改为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"; 
    } 
});

来源

2010-02-28 22:32:16 Joel