在窗口滾動期間保持元素在容器內固定

Question

我有一個問題，我認爲最好使用圖像解釋，所以我將附加它。

好了，所以基本上我有什麼是父容器，和裏面的元素（它實際上是一個文本塊），我們將其稱爲固定元件。

當用戶在頁面頂部時，我希望固定元素位於其父元素的頂部。當用戶開始向下滾動頁面時，父級開始向上移動視圖端口，我希望固定元素跟隨滾動，直到它到達其父級的底部，然後停止在那裏。

目前還沒有HTML或任何這方面的，因爲我在這個網站的草圖繪製階段。我一般會使用jQuery或JavaScript，我的JS技能是有限的，我熟悉jQuery，但我並不介意複製和粘貼代碼，並搞亂了它。

任何幫助將不勝感激。謝謝！

Answer 1

你想使用javascript（帶或不帶jQuery）要做的事情是將元素的位置完全改變爲父對象的位置，父對象應該是相對的。您根據滾動條的位置更改位置。

本教程對如何完成該操作有很好的解釋。

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Answer 2

對於一些敏感的網頁或調整您的瀏覽器時，側邊欄成爲一個核心要素。所以你可能想要關心制動點。我使用了786.此外，div最初可能不會位於頂部，所以您應該通過代碼設置偏移量。

<script> 
    $().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 
     var $div_top = $scrollingDiv.offset().top; 
     $(window).scroll(function(){ 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
     $(window).resize(function() { 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
    }); 
</script>