將標籤固定到頁面頂部，但在標題下方

我想弄清楚如何爲網站設計標題，以便在標題下面放置標籤（看起來像是從中伸出在標題下），當頁面向下滾動（並且標題向上移動）時，保持頁眉不變，但是當它們到達頁面頂部時，在頁面頂部變得固定，以便它們始終可見。將標籤固定到頁面頂部，但在標題下方

我知道如何將一個元素固定到頁面的頂部，以使其始終可見，但是當頁眉位於窗口中時，我希望標籤出現在其下方，而不是頂部。當標題離開頁面時，標籤將仍然存在。

我需要的是使用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