在窗口滚动期间保持元素在容器内固定

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>