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值是＆gt;比侧边栏高度，它再次滚动...所以这段代码只能工作一次：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))
        });

    }

})

});

我希望它不会让你头疼：D

它有效...但它有点长，并且可能存在获得相同结果的更好方法。结果是侧边栏仅在我到达终点后才滚动而不保持移动。

我可以为每个新的侧边栏滚动重复代码（这里侧边栏只滚动2次）

你能帮我把它变得更紧凑吗？ THX！

jQuery动画侧边栏问题

1 个答案: