i have been coding on this vertical sliding navigation quite a while. its tested on all relevant browsers and works like a dream.

id loved to show you an example of it, but the site is under development, and i, as a little coder, am not allowed to grant access to it, additionally i do not have enough time to create a testcase for everybody to see.

to give you a short insight:

the site is quite long (vertically) and we wanted a small navigation (very subtle) to follow the user when scrolling. the problem was: the footer is quite long too, and we didnt want the sliding navigation to reach into it, when scrolling down the footer. in other words: i had to stop the animation when the sliding nav reached the end of the main content.

so far so good, i had NO idea how to tell the animation to stop at certain conditions, other than telling it that from the start.

my solution is totally workaround and completely selfmade. but i am SURE that there is some kind of "stop animation when condition is met"-command i was totally overlooking. so please dear jquery community: tell me what i am doing wrong, and how i could improve this function.

here is the code:

2. function slide_nav() {
3. var scrollingDiv = jQuery("div#slide_nav");
4. if(scrollingDiv.length > 0)
5.     {
6.         // check for main div lower border to set the navigation so, that it
7.         // doesnt exceeds this value when scrolling
8.         
9.         // save the main divs lower border position from top
10.         var main_div = jQuery('div#main');
11.         var main_div_position = main_div.position();
12.         var main_div_lower_reach = main_div_position.top + main_div.height();
13.         
14.         var scrollingDiv_offset = scrollingDiv.offset();
15.         var initial_offset = scrollingDiv_offset.top;
16.         
17.         // Create small helper dog to look up position when finished animating
18.         var wrapper = jQuery('div#wrapper');
19.         wrapper.before('<div id="watchdog"></div>');
20.         
21.         var watchdog = jQuery('div#watchdog');
22.         
23.         watchdog.css({
24.                 'background': 'transparent',
25.                 'height': scrollingDiv.height(),
26.                 'width': scrollingDiv.width(),
27.                 'position': 'absolute',
28.                 'top': scrollingDiv_offset.top,
29.                 'left': scrollingDiv_offset.left
30.         });
31.         
32.         jQuery(window).scroll(function() {
33.             setTimeout(function() {
34.                 scroll_this_dog(scrollingDiv)
35.             }, 500);
36.         });
37.         
38.         function scroll_this_dog(element) 
39.         {
40.             watchdog.css({
41.                 "marginTop" : (jQuery(window).scrollTop() + 1) + "px"
42.             });
43.             
44.             var watchdog_offset = watchdog.offset();
45.             var watchdog_lowerend = watchdog_offset.top+watchdog.height();
46.             
47.             //console.log("BARK! thats my lower end: "+watchdog_lowerend);
48.             //console.log("maindiv lower end: "+main_div_lower_reach);
49.             
50.             
51.             if((watchdog.height()+watchdog_offset.top) > main_div_lower_reach)
52.             {
53.                 //console.log("BARK! im lower!");
54.                 element.stop().animate({
55.                     "marginTop" : main_div_lower_reach - element.height() - initial_offset + "px"
56.                 }, 1000, "easeOutExpo");
57.             }
58.             else
59.             {
60.                 //console.log("BARK! im above!");
61.                 element.stop().animate({
62.                     "marginTop" : (jQuery(window).scrollTop() + 1) + "px"
63.                 }, 1000, "easeOutExpo");
64.             }
65.         }
66.     }
67. }

thanks to everyone willing to have a look into this, its really appreciated!

thanks and gbye