2

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.

4

2 回答 2

0

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

于 2012-11-09T00:32:37.503 回答
0

您是否尝试过仅使用纯 CSS 来实现这一目标？您可以简单地使用该属性overflow:scroll;吗？我在这里设置了一个示例小提琴：http: //jsfiddle.net/7q9Fw/5/

这样 div 不会重叠，您只需要使用

float:left;
clear:left;

属性，这将使 div 与众不同。

于 2012-11-09T00:48:41.777 回答