Javascript 停止Div滚动到另一个Div

Javascript 停止Div滚动到另一个Div,javascript,html,css,Javascript,Html,Css,基本上我有一个div容器,其中包含两个div。当向下滚动并且div容器经过窗口时,它会粘在屏幕顶部并跟随屏幕,但是当我继续向下滚动时,容器div内的div会与页脚重叠 我似乎不知道如何阻止页脚重叠,我希望这样,当div容器的底部刚好到达页脚附近时,页脚停止移动,但是当它向上滚动时,屏幕仍然会跟随它。目前,它所做的只是在通过时跟随屏幕向下,然后跟随屏幕返回到其原始位置 以下是以下部分的JS: function sticky_relocate_2() { var window_top = $

基本上我有一个div容器,其中包含两个div。当向下滚动并且div容器经过窗口时,它会粘在屏幕顶部并跟随屏幕,但是当我继续向下滚动时,容器div内的div会与页脚重叠

我似乎不知道如何阻止页脚重叠,我希望这样,当div容器的底部刚好到达页脚附近时,页脚停止移动,但是当它向上滚动时,屏幕仍然会跟随它。目前,它所做的只是在通过时跟随屏幕向下,然后跟随屏幕返回到其原始位置

以下是以下部分的JS:

function sticky_relocate_2() {
    var window_top = $(window).scrollTop();
    var div_top = $('.sticky-anchor').offset().top + 210;


    if (window_top > div_top) {
            $('#right_side_inner_container').addClass('sticky_2')


    } else 
            $('#right_side_inner_container').removeClass('sticky_2')

}

google.setOnLoadCallback(function() 
{
     $(window).scroll(sticky_relocate_2);
 sticky_relocate();
});
div id=right\u side\u internal\u container这是我要移动的容器的id,当它到达页脚时要停止。 div id=页脚的页脚id

我在其他一些网站上看到,当它达到某一点时,它会从“顶部”css中减去,因此滚动过的每个像素都会从中扣除。但我似乎不知道怎么做

任何帮助都将不胜感激

编辑:一个例子

如果你看右边的div,当你滚动过它时,它会粘在屏幕上,我可以这样做,但是当你在短时间后继续向下滚动它时,它会停止并且不会继续。这就是我正在努力做的

当我使用inspect元素(chrome)时,顶部的css会不断减少

编辑2:添加的样式:

#right_side_inner_container {
    width 300px;
    height: 600px;
    background: transparent;
    text-align: center;
    color: black;
}

#right_side_inner_container.sticky_2 {
    width: 300px;
height: 600px;
background: transparent;
position: fixed;
top: 0;
    margin-top: -8px;
}

#footer {
width: 100%;
height: 200px;
margin: 5px 0 0 0;
clear: both;
background: blue;
}

我希望右内容器div在到达页脚div之前停止。当原始div滚动过去时,会添加sticky类,这样当滚动过去时,它可以跟随屏幕。

您是否尝试过添加一些
填充底部
或滚动div的容器?

您尝试过吗使用纯CSS来实现这一点?您只需使用属性
overflow:scroll?
我在这里举了一个小提琴的例子:

为了使div不重叠,只需使用

float:left;
clear:left;

属性,这将使div分开。

Yea什么也不做。当div粘在屏幕上时,我会添加一个css类,使其位于顶部:0,位置固定,所以不知道填充是否会影响它。如果你向下滚动时看右边的div,然后在某个点停止,这就是我试图做的。我设法让它移动时,通过只是不能让它停止萝莉对不起,你的意思是在顶部的div它如何有一个固定的位置,不移动时,你向下滚动?我没有百分之百地理解你的问题,也许我解释得不好。如果你向下滚动时看一下右边的div,然后在某个点停止,这就是我要做的。当它通过的时候,我设法让它动了起来,只是无法让它停下来。谢谢你的回答,呃,我不确定这是否是我想要做的:/也许我解释得很糟糕。如果你向下滚动时看一下右边的div,然后在某个点停止,这就是我要做的。我设法让它移动时,通过只是不能让它停止从你的评论你说你改变了CSS固定(大概与其他样式),这是一种方式…减去像素,如你上面所描述的是一种低效的方法,你介意张贴你的CSS样式吗?当然,我添加了CSS的postOk,你的想法很正确。这里有一个使用你的概念的快速解决方案,不要介意我添加的“绒毛”来模拟你的情况,只要注意固定框的JS和CSS样式:我认为主要的问题是,当你应该减去它时,你会添加标题的偏移量,并且你应该给固定框一个标题偏移量的顶部,不是零谢谢你的回复我会看看这个看看我是否能让它为我的东西工作。