我正在尝试将固定的Postion元素从上到下移动，因为我们滚动并限制该元素在页脚元素之前的最低位置
<div class="outer">
<div class="main">
<div class="left">
</div>
<div class="right">
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right herethe box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
the box that is scrolled goes right here
<div id="scrolling_boxI" class="scrolling_box">
<img src="http://placehold.it/350x150"/>
</div>
</div>
</div>
<div id="footer">
Footer goes here
Footer goes here
Footer goes here
</div>
</div>
$(window).scroll(function(){
var pos = $('#footer').offset();
var top = pos.top;
var pos1 = $('#scrolling_boxI').offset();
var top1 = pos1.top
// alert(top1+"top1"+top+"top"+$(window).scrollTop()+"scrollTop");
var topT= $(window).scrollTop()
if( topT<top-350-top1)
{
for(var i=pos1;i<topT+350);i++)
{
$("#scrolling_boxI").stop().animate({"marginTop": (i) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
}
}
});
.scrolling_box{
position:fixed;
top:50px;
left:150px;
width:300px;
z-index:2;
}
img{
border-radius:10px;
box-shadow: 10px 10px 5px #888888;
}
#footer {
height:200px;
background:#000;
color:#fff;
margin-top:20px;
}
到达目前为止两个版本，但两个有缺点
答案 0 :(得分：1)
我建立了一些与你尝试做的事情相近的东西。它不是将移动元件放在顶部，而是在侧面。通过一些修改，您应该能够准确地获得它。
这是我的工作方式。
var parent_height = $(parent).height();
var parent_offset = $(parent).offset().top;
var window_height = $(window).height();
var doc_scroll = $(document).scrollTop();
这些变量将为您提供找到移动元素正确位置所需的信息。 parent是基于滚动高度的元素。
var progress = (doc_scroll - parent_offset) / (parent_height - window_height);
progress是页面向下滚动的金额，相对于小数百分比的parent元素。
if (progress < 0) { progress = 0; }
if (progress > 1) { progress = 1; }
设置progress后，我确保通过执行此操作不会超过（或在！下）。
在此步骤之后，我们的需求会有所不同。我计算了定位它所需的margin-top。如果您正在使用position:absolute;，则需要使用progress来设置移动元素top值。
希望这有帮助！