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

【问题标题】：Keep an element fixed within a container during window scroll在窗口滚动期间将元素固定在容器中
【发布时间】：2012-02-09 19:51:40
【问题描述】：

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

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

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

目前还没有 HTML 或任何内容，因为我正处于这个网站的粗略草图阶段。

我对使用jQuery或javascript持开放态度，我的JS技能有限，我对jQuery很熟悉，但我不介意复制和粘贴代码并弄乱它。

任何帮助将不胜感激。谢谢！

【问题讨论】：

当用户向下滚动到父容器元素完全滚出页面时，你希望发生什么？
在这种情况下，它将与父级一起消失。它应该始终保留在父级内部。但基本思想是如果父元素在屏幕底部，则固定元素在父元素顶部，但如果父元素在屏幕顶部，则固定元素在父元素底部.

标签： jquery scroll sticky

【解决方案1】：

你想要使用 javascript（有或没有 jQuery）做的是改变元素的位置绝对反对父级的位置，父级应该是相对的。您根据滚动条的位置更改位置。

本教程很好地解释了如何实现这一点。

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

【讨论】：

【解决方案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>

【讨论】：