到達頁面末尾時（滾動時）如何向上移動固定div 200px？

Question

我有一個帶有兩列（側欄）的頁面。

左邊的是固定的（包含google廣告），即使我向下滾動頁面也不會改變。

右邊的包含帖子，並且位置相對，因此可以滾動。

但是我在右列（邊欄）之后有一個頁腳。

此頁腳的寬度為頁面的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 scroll。 大多數網站都使用它來加載其網站的內容。

   $(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來做到這一點。

閱讀這個詳細信息。 這里的演示