在窗口滚动期间将元素固定在容器中

Question

我有一个问题，我认为最好使用图片来解释，所以我要附上它。

好的，基本上我所拥有的是一个父容器，里面有一个元素（它实际上是一个文本块），我们将其称为FIXED元素。

当用户位于页面顶部时，我希望固定元素位于其父级的顶部。当用户开始向下滚动页面，并且父节点开始向上移动视图端口时，我希望固定元素跟随滚动直到它到达其父节点的底部，然后它停在那里。

目前还没有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>