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

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>