CSS位置x時的固定位置

我有一個div位於頁面頂部，正下方的標題欄。當用戶向下滾動，酒吧上升時，我希望它只能上升到瀏覽器窗口的邊緣，然後像呆在那裏一樣停留在那裏。CSS位置x時的固定位置

這怎麼可能？只有CSS才行嗎？還是我需要jQuery？我寧願jQuery的跨瀏覽器兼容性。

這裏是我使用至今的簡單明瞭的CSS代碼：

#fbLikeDiv 
{ 
    position: fixed; 
    top: 95px; 
    left: 10px; 
}

你也可以看看網站：www.myskoob.com/postish/ - 這是關於Facebook的左像盒子一樣，當用戶向下滾動時，我想停留在瀏覽器窗口的頂部邊緣，但首先會一直延伸到那裏。

來源

2012-05-21 weltschmerz

我會說jquery：http://www.google.co.in/search?sourceid=chrome&ie=UTF-8&q=jquery+fixed+menu+when+scroll – Johan

我如果CSS允許像'min-top'和'min-bottom'這樣的屬性與'min-width'和'max-width'一起使用，那麼會很好。可悲的是，我認爲我們必須等到CSS4。 – Blazemonger

我認爲這是你在找什麼：http://jsfiddle.net/QuVkV/3/

你需要使用一些jQuery的。在上面的例子中，遵循使用id = 「酒吧」

這裏HTML結構的DIV：

<div id='wrapper'> 
    <div id='upper'>This is upper content</div> 
    <div id='position-saver'> 
     <div id='bar'>This is your facebook like button</div> 
    </div> 
    <div id='lower'>This is some content lower than the menu bar</div> 
</div>

這是CSS：

#wrapper { 
    width: 100%; 
    height: 2000px; 
} 

#upper { 
    width: 100%; 
    height: 100px; 
} 

#position-saver { 
    height: 50px; 
    width: 100%; 
} 

#bar {  
    position: static; 
    height : 50px; 
    width: 100%; 
}

這裏是JavaScript：

$(document).on('scroll', function(){ 
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){ 
     $("#bar").css({position: "fixed", top:0});    
    } 
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){ 
     $("#bar").css({position: "static", top: 0});   
    }    
});

來源

2012-05-21 13:27:01 gabitzish

@ gabitzish完美，這正是我需要的！謝謝！ – weltschmerz

CSS位置x時的固定位置

回答

相關問題