javascript - 到达页面末尾时（滚动时）如何将固定 div 向上移动 200px？

Question

我有一个包含两列（侧边栏）的页面。

左边是固定的（包含谷歌广告），即使我向下滚动页面也保持不变。

右侧包含帖子并且相对定位，因此可以滚动。

但是我在右栏（侧边栏）之后有一个页脚。

此页脚的宽度为页面的 100%。

问题是当我滚动到底部时，页脚会转到左侧边栏。

当我向下滚动时从页面末尾到达 200px 时，我想将左侧边栏 200px 移动到顶部。

并在滚动回到顶部时返回。

<div id="main">
    <div id="left">Google Ads here</div>
    <div id="right">Content posts here</div>
</div>
<div id="footer">
    footer here
</div>

Answer 1

您可以使用 jQuery 滚动。大多数网站都使用它来为其网站加载内容。

   $(window).scroll(function(){  

        if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
            setLeftBarPosition();
        }
    });

   function setLeftBarPosition(){
    // your code to set position of lefftbar

  }

Answer 2

您可以使用纯 CSS 而不是 javascript 来做到这一点。

阅读本文了解详情。演示在这里