jQuery动画侧边栏问题

Question

我使用的动画侧边栏与窗口滚动一起滚动，并在到达页脚时停止。

jQuery(document).ready(function() {

var jQuerysidebar = jQuery("#sb"),
    jQuerywindow = jQuery(window),
    offset = jQuerysidebar.offset(),
    sbh = jQuerysidebar.height(),
    footer = jQuery("#footer").offset().top;


 jQuerywindow.scroll(function() {
    if ( jQuerywindow.scrollTop() > offset.top  ) {
        if (jQuerywindow.scrollTop() + jQuerysidebar.height() < footer) {
            jQuerysidebar.stop().animate({
                marginTop: jQuerywindow.scrollTop() - 8
            });

        }
    } else{
         jQuerysidebar.stop().animate({
            marginTop: 0
        });
    }
});

});

由于侧边栏的高度是>窗口的高度，所以我无法轻易访问侧边栏的底部：当我向下滚动时，它也会下降...

我希望边栏只有在到达终点后才开始滚动...到目前为止，我只能部分获得此结果：

if ( jQuerywindow.scrollTop() > jQuerysidebar.height()  ) {

很明显，在scrollTop的值大于边栏高度之后，它将继续滚动...因此该代码仅可运行一次：D

是否有一种更好的方法可以使侧边栏仅在到达终点后才滚动？

我也尝试过其他解决方案，但每次尝试都遇到了一些不同的问题。 （我是使用jquery的新手...）

感谢您的帮助：）

Answer 1

今天，我试图重写代码，这是结果：

jQuery(document).ready(function() {

var jQuerysidebar = jQuery("#sb"),
    jQuerywindow = jQuery(window),
    offset = jQuerysidebar.offset(),
    sbh = jQuerysidebar.height(),
 footer = jQuery("#footer").offset().top;


 jQuerywindow.scroll(function() {

  // here It check the win scrolltop to be > than sidebar height + its offset.top value 
 // and in the same time that the sidebar height*2 (+offset.top) is not bigger than the footer offset top.
 // if this is true, than marginTop = sidebar height
    if ( (jQuerywindow.scrollTop()  > sbh+offset.top) & (((sbh*2)+offset.top) < footer)) {

           jQuerysidebar.stop().animate({
                marginTop: sbh
                    });
  // if the sidebar height*2 (+offset.top) is bigger than the footer offset.top value, than
  // the marginTop will be set = to the sidebar height - the difference between the sidebar height*2 and the footer (to this last value is also removed the sidebar offset.top)
  // 10 is for to add some more space between the sidebar and the footer
    }else if ((jQuerywindow.scrollTop()  > sbh+offset.top) & (((sbh*2)+offset.top) > footer))  { 
           jQuerysidebar.stop().animate({
             marginTop: (sbh + (footer-(sbh*2)) - (offset.top+10))
        });

    } else {  jQuerysidebar.stop().animate({
            marginTop: 0
        });
    }

  // here it does the same thing as above but for values of scrolltop > than sidebar height*2 (+ offset.top value)
            if  (jQuerywindow.scrollTop() > (sbh*2)+offset.top & (((sbh*3)+offset.top) < footer)) {
        jQuerysidebar.stop().animate({
                marginTop:  sbh*2                });

        }else if ( (jQuerywindow.scrollTop()  > (sbh*2)+offset.top) & (((sbh*3)+offset.top) > footer)) { 

          jQuerysidebar.stop().animate({
             marginTop: ((sbh*2) + (footer-(sbh*3)) - (offset.top+10))
        });

    }

})

});

结果是，边栏仅在我到达其末端后才滚动而不继续移动。

它可以工作，但是它有点长，可能会有更好的方法来获得相同的结果。

我可以为每次新的侧边栏滚动重复代码（此处，侧边栏仅滚动2次。）>