Stop Div scrolling past another div

Question

Basically I have this div container which holds two divs. 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.

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. 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:

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=footer id for the footer.

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. 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

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. This is what I am struggling to do.

When I use inspect element (chrome) the top css keeps getting deducted.

EDIT 2: added styles:

#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. The sticky class is added when the original div is scrolled past which allows it to follow the screen when scrolled past.

Answer 1

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

Answer 2

Have you tried just using pure CSS to achieve this? You can just simply use the property overflow:scroll; ? I have set up an example fiddle here: http://jsfiddle.net/7q9Fw/5/

So that the div's do not overlap you simply just need to use the

float:left;
clear:left;

attributes and this will set the div's apart.

Stop Div scrolling past another div

Question

2 answers

solution1
0 2012-11-09 00:32:37

solution2
0 2012-11-09 00:48:41

Stop Div scrolling past another div

Question

2 answers

solution1 0 2012-11-09 00:32:37

solution2 0 2012-11-09 00:48:41

solution1
0 2012-11-09 00:32:37

solution2
0 2012-11-09 00:48:41