Question

我正在尝试创建一个div'浮动'，其行为类似于固定div（无论滚动如何都卡在特定位置），但当它碰到div的边界时，它会停止被修复。

当滚动条位于顶部时，它应该将div放置在包含div内的0处（距离顶部100个像素）并且当滚动条到达底部时，它应该防止浮动板移出容器。浮子的高度是静态的，但容器的高度是动态的。

我已经看到了这种类型的这种类型，但无法弄清楚如何为它找到一个好的例子。

如果可能的话，我想避免使用jQuery，因为我想它应该只需要一些简单的JavaScript来确定相对于它所在的div的当前位置。

谢谢。

Answer 1

好的伙计们，这是一个完整的解决方案。我只在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;}

Answer 2

我已经实现了这个并且相当不错。 http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/。但这只是使用jquery完成的。如果只是简单的javascript，我会通过任何链接告诉你。

创建一个保持在div内的浮动框

2 个答案: