创建停留在div中的浮动框
创建停留在div中的浮动框
提问于 2011-03-28 12:51:31
我正在尝试创建一个div‘浮动’，它的行为类似于一个固定的div (无论滚动与否都被固定在一个特定的位置)，但是当它到达它所在的div的边界时，它就不再是固定的了。
当滚动条在顶部时，它应该将div放在包含的div中的0处(放置在距顶部100像素的位置)，当滚动条到达底部时，它应该阻止浮动框离开容器。浮动对象的高度将是静态的，但容器高度将是动态的。
我已经在各处看到了这种类型的东西，但我不知道如何找到一个好的例子。
如果可能的话，我希望避免使用jQuery，因为我认为它应该只需要一些简单的JavaScript来确定相对于它所在的div的当前位置。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-03-28 16:17:10
好了，朋友们，这是一个完整的解决方案。我只在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;}Stack Overflow用户
发布于 2011-03-28 12:55:44
我已经实现了这一点，而且效果很好。http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/。但这只能使用jquery来完成。如果icome通过任何普通的javascript链接，我会让你知道。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5454821
复制相关文章
相似问题
腾讯云开发者
