Question

我有一个浮动框，我想知道如何阻止它重叠页脚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中复制这个问题。

我尝试使用浮动：左右两种，但似乎都没有。

Answer 1

Almost Solved Check for Demo

$(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" );
  }
});

如何在页脚之前停止固定位置？

1 个答案: