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() {
    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 的新手......）

谢谢你的帮助：）

4

1 回答 1

0

今天，我尝试重写代码，结果是这样的：

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 次）。

于 2013-05-14T15:57:12.043 回答