Hello everybody here,
I'm very new in javascript and jquery, but I like the
possibilities a lot!
I have a page with a div (id='wrapper')
Inside this wrapper div I have to divs (id='left'). One if
floating to the left and the other is floating to the right (id='right').
The right div is not as high as the left one. So the right div will
scroll down untill the bottom of div left.
Well the right div is scrolling very smooth down while i'm
scrolling down. See code below.
-
var $sidebar = $("#right"),
-
$window = $(window),
-
offset = $sidebar.offset(),
-
topPadding = 15;
-
-
$window.scroll(function() {
-
if ($window.scrollTop() > offset.top) {
-
$sidebar.stop().animate({
-
marginTop: $window.scrollTop() - offset.top + topPadding
-
}, 400);
-
} else {
-
$sidebar.stop().animate({
-
marginTop: 0
-
}, 400);
-
}
But the problem is that I can keep on scrolling without stop and
the right divs is coming with my sroll action. And that is the point I
dont want. I want that when I scroll down to the bottom that div right
will stop scrolling as well.
I tried so many things like:
- giving a max-height to the wrapper;
- giving a max-height to the body and html;
- tried many other code without success;
So i'm very wondering how I can solve this issue.
My result should be:
I want that the scroll function/animation will stop when I reach
the bottom of the div#wrapper or the bottom of div#left.
I hope someone can support me with this. I will be so thankful.
Greets Johnny