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

I have a question that I think will be best explained using an image, so I am going to attach it.

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

Ok, so basically what I have is a parent container, and an element inside it (it will actually be a block of text), which we will refer to as the FIXED element.

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

When the user is at the top of page, I want the fixed element to be at the top of its parent. When the user starts scrolling down the page, and the parent starts moving up the view port, I want the fixed element to follow the scrolling until it reaches the bottom of its parent, then it stops there.

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

There currently is no HTML or anything for this yet, because I'm in the rough sketching stage of this website.

目前还没有HTML或其他任何内容,因为我正处于本网站的粗略草图阶段。

I am open to using jQuery or javascript in general, my JS skills are limited, and I am familiar with jQuery, but I don't mind copying and pasting code and messing with it.

我一般都习惯使用jQuery或javascript,我的JS技能有限,而且我熟悉jQuery,但我不介意复制和粘贴代码并搞乱它。

Any help will be greatly appreciated. Thanks!

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

2 个解决方案

#1

What you want to do using javascript (with or without jQuery) is change the position of the element absolutely against the position of the parent, the parent should be relative. You change the position based on the position of the scrollbar.

你想用javascript(有或没有jQuery)做的是将元素的位置绝对地改为父对象的位置,父对象应该是相对的。您可以根据滚动条的位置更改位置。

This tutorial has a good explanation of how to accomplish that.

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

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

#2

For some responsive pages or when resizing your browser, sidebars become a central element. so you may want to care for a brake point. I used 786. Also the div may initially not be positioned at the top, so you should set an offset by code.

对于某些响应式页面或在调整浏览器大小时,侧边栏成为一个核心元素。所以你可能想要一个刹车点。我使用了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>