我有一个浮动框,我想知道如何阻止它重叠页脚div,方法是将它停在主div上,只允许它进入。
window.onload = function ()
{
var scrolledElement = document.getElementById('scrolling_box');
var top = scrolledElement.offsetTop;
var listener = function ()
{
var y = scrolledElement.scrollTop || scrolledElement.scrollTop || window.pageYOffset;
if (y >= top-25)
{
scrolledElement.classList.add('fixed');
} else {
scrolledElement.classList.remove('fixed');
}
};
window.addEventListener('scroll', listener, false);
}
我希望它停在主要的div上,如下所示:
<div class="outer">
<div class="main">
<div class="left">
</div>
<div class="right">
<div class="scrolling_box">
the box that is scrolled goes right here
</div>
</div>
</div>
<div id="footer">
Footer goes here
</div>
</div>
我希望它能在主类中停止,我看了很多其他的教程,没有我可以把它移植到普通的javascript。我尝试包含.stop(),但遗憾的是它仅仅是为了jQuery。遗憾的是,我无法在jsfiddle中复制这个问题。
我尝试使用浮动:左右两种,但似乎都没有。
答案 0 :(得分:0)
$(window).scroll(function(){
var pos = $('#footer').offset();
var top = pos.top;
var pos1 = $('#scrolling_boxI').offset();
var top1 = pos1.top
//alert(top);
if( $(window).scrollTop()<top-150-top1)
{
$("#scrolling_boxI").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
}
});