創建浮動框，保持在div

我想創建一個div'浮動'，其行爲類似於一個固定的div（卡住在一個特定的位置，無論滾動），但是當它擊中div的邊界它在內部，它不會被修復。創建浮動框，保持在div

當滾動條位於頂部時，它應該將div放置在包含div的div（位置距離頂部100像素），並且當滾動條到達底部時，它應該防止浮動物超出容器。浮子的高度是靜止的，但容器高度是動態的。

我已經看到過這種類型的遍地，但無法弄清楚如何找到一個很好的例子。

我想避免jQuery，如果可能的話，因爲我想它應該只需要一些簡單的JavaScript來確定當前相對於它所在的div的位置。

謝謝。

來源

2011-03-28 Exit

好的人，這裏是一個完整的解決方案。我只在Firefox和IE中測試過它，但它應該可以全面工作（我認爲）。這是直接的JavaScript和jQuery是而不是使用。第一個JS函數確保返回的高度適用於各種瀏覽器。

編輯 - 我改進了這一點，見下文。

<html> 
<head> 
<style type="text/css"> 
* {margin:0;padding:0;} 
#header {height:300px;width:100%;background:#888;} 
#main {height:800px;width:70%;background:#eee;float:left;} 
#side {width:30%;height:auto;background:#ddd;float:left;position:relative;} 
#floater {height:400px;width:90%;background:#dcd;top:0px;position:absolute;} 
#footer {height:300px;width:100%;background:#888;clear:both;} 
</style> 
<script> 
function getPageY() { 
var height = 0; 
if(typeof(window.pageYOffset) == 'number') { 
    height = window.pageYOffset; 
} 
else if(document.body && document.body.scrollTop) { 
    height = document.body.scrollTop; 
} 
else if(document.documentElement && document.documentElement.scrollTop) { 
    height = document.documentElement.scrollTop; 
} 
return height; 
} 
onload=function() { 
window.onscroll = scroll; 
function scroll() { 
    ybox.value = "this: "+getPageY(); 
    var f = document.getElementById("floater"); 
    var y = getPageY()-300; // minus header height 
    var divh = document.getElementById("main").offsetHeight; 
    if (divh > 400) { // greater than floater height 
    divh -= 400; // minus floater height 
    if (y < 0) y = 0; 
    else if (y > divh) y = divh; 
    f.style.top = y+"px"; 
    } 
} 
} 
</script> 
</head> 
<body> 
<div id="header"></div> 
<div id="main"></div> 
<div id="side"><div id="floater">Float Content<br /> 
<input name="ybox" id="ybox"></div></div> 
<div id="footer"></div> 
</body> 
</html>

這個工程，但與圖像是非常跳動。我將其修改爲在固定位置卡住時使用固定位置。用這個替換三條匹配線，獲得更加平滑的結果：

if (y < 0) {y = 0;f.style.position = "absolute";} 
else if (y > divh) {y = divh;f.style.position = "absolute";f.style.top = divh+"px";} 
else {f.style.position = "fixed";f.style.top = 0;}

來源

2011-03-28 08:17:09 Exit

我已經實現了這個，它很不錯。 http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/。但是這只是使用jQuery來完成的。我會讓你知道，如果icome橫跨任何鏈接只是普通的JavaScript。

來源

2011-03-28 04:55:44

感謝您的快速回復，但它沒有處理包含div中的浮動內容。使用這個例子，漂浮物應該保留在側柱區域內，並且永遠不會通過頁腳。 – Exit 2011-03-28 05:12:20

創建浮動框，保持在div

回答

相關問題