创建一个浮动框，它保持在一个div内 [英] Creating a floating box which stays within a div
问题描述
我正在尝试创建一个类似于固定div的div'浮动'（不管是否滚动，都停留在特定的位置），但是当它碰到div的边界时，它将停止修复。
当滚动条位于顶部时，它应该将div放置在包含div的div中（位置距离顶部100像素），当滚动条到达底部，它应该防止浮子流出容器。漂浮物的高度应该是静态的，但是容器的高度是动态的。
我已经看到了这种类型的遍布整个地方，但不能确定如果可能的话，我想避免使用jQuery，因为我想它应该只需要一些简单的JavaScript来确定当前位置
谢谢。
好的人，这是一个完整的解决方案。我只在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>
函数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;
}
返回高度;
}
onload = function（）{
window.onscroll = scroll;
function scroll（）{
ybox.value =this：+ getPageY（）;
var f = document.getElementById（floater）;
var y = getPageY（） - 300; //减去标题高度
var divh = document.getElementById（main）。offsetHeight;
if（divh> 400）{//大于浮动高度
divh - = 400; //减去浮动高度
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 =yboxid =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;}
I'm trying to create a div 'floater' which acts similar to a fixed div (stuck in a specific position regardless of scrolling), but when it hits the boundaries of the div it is within, it stops being fixed.
When the scrollbar is at the top, it should have the div placed at 0 within the containing div (positioned say 100 pixels from the top) and when the scrollbar reaches the bottom, it should prevent the floater from going outside the container. The height of the floater would be static, but the container height would be dynamic.
I've seen this type of this all over the place, but can't figure out how to find a good example for it.
I'd like to avoid jQuery if possible, as I imagine it should only require some simple JavaScript to determine the current position relative to the div it is within.
Thank you.
Okay folks, here is a complete solution. I've only tested this in Firefox and IE, but it should work across the board (I think). This is straight JavaScript and jQuery is not used. The first JS function makes sure the height returned works in various browsers.
Edit - I improved on this, see below.
<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>
This works, but with images it is extremely jumpy. I modified it to use a fixed position when it should be stuck in a position. Replace the three matching lines with this for a smoother result:
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;}
这篇关于创建一个浮动框，它保持在一个div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
