停止Div滚动到另一个div

Question

Basically I have this div container which holds two divs. 基本上我有这个div容器，其中包含两个div。 When scrolled down and the div container is passed by the window it sticks to the top of the screen and follows the screen however when I keep scrolling down, the divs inside the container div overlap the footer. 当向下滚动并通过窗口传递div容器时，它粘贴在屏幕顶部并跟随屏幕，但是当我继续向下滚动时，容器div中的div与页脚重叠。

I cant seem to figure out how to stop the footer from being overlapped, I want it so when the bottom of the div container reaches just short of the footer it stops moving however when scrolling back it up follows the screen still. 我似乎无法弄清楚如何阻止页脚重叠，因此，当div容器的底部刚好到达页脚时，它便停止移动，但是向上滚动时，它仍然跟随屏幕。 Currently all it does is follow the screen down when passed and follows it back up to its original position. 目前，它所做的只是在屏幕通过时向下移动屏幕，然后将其返回到原始位置。

Here is the JS for the following part: 这是以下部分的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_side_inner_container thats the id of the container I want to be moving and to stop when it reaches the footer. div id = right_side_inner_container那是我要移动并在到达页脚时停止的容器的ID。 div id=footer id for the footer. div id =页脚的页脚ID。

I saw on some other sites that when it reaches a certain point it minuses from the 'top' css so every pixel scrolled past it keeps deducting from it. 我在其他一些站点上看到，当到达某个点时，它会从“顶部” css减去，因此每个滚动到其上方的像素都会从中减去。 I cant seem to figure out how to do it though. 我似乎无法弄清楚该怎么做。

any help would be appreciated. 任何帮助，将不胜感激。

EDIT: an example 编辑：一个例子

http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h

if you look at the right hand div, when you scroll past it sticks to the screen which I can do but when you keep scrolling it down after a short while it stops and doesn't continue. 如果您看右手div，当您滚动过去时，它会停留在屏幕上，而我可以这样做，但是当您停下来不久后继续向下滚动时，它就不会继续。 This is what I am struggling to do. 这就是我正在努力做的。

When I use inspect element (chrome) the top css keeps getting deducted. 当我使用检查元素（chrome）时，顶部的css不断被扣除。

EDIT 2: added styles: 编辑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;
}

I want the right inner container div to stop just before it reaches the footer div. 我希望正确的内部容器div在到达页脚div之前停止。 The sticky class is added when the original div is scrolled past which allows it to follow the screen when scrolled past. 当原始div滚动过去时，便会添加sticky类，这使它可以在滚动过去时跟随屏幕。

Answer 1

您是否尝试过在<body>或滚动div的容器padding-bottom添加一些padding-bottom ？

Answer 2

Have you tried just using pure CSS to achieve this? 您是否尝试过使用纯CSS来实现这一目标？ You can just simply use the property overflow:scroll; 您可以只使用属性overflow:scroll; ? ？ I have set up an example fiddle here: http://jsfiddle.net/7q9Fw/5/ 我在这里设置了一个小提琴示例： http : //jsfiddle.net/7q9Fw/5/

So that the div's do not overlap you simply just need to use the 这样div不会重叠，您只需要使用

float:left;
clear:left;

attributes and this will set the div's apart. 属性，这将设置div的间隔。

停止Div滚动到另一个div

问题描述

2 个解决方案

解决方案1
0 2012-11-09 00:32:37

解决方案2
0 2012-11-09 00:48:41

停止Div滚动到另一个div

问题描述

2 个解决方案

解决方案1 0 2012-11-09 00:32:37

解决方案2 0 2012-11-09 00:48:41

解决方案1
0 2012-11-09 00:32:37

解决方案2
0 2012-11-09 00:48:41