jQuery动画侧边栏问题

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

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 ...）

感谢您的帮助:)今天

来源

2013-05-11 Gabrielcik

如果您将'position：relative'设置为'＃sb'，然后用'top'切换出'marginTop'，它会起作用吗？看看我做的这个例子：http://jsfiddle.net/KWn8e/ – JAM 2013-05-11 19:12:21

我试过，但我没有得到希望的结果。在我结束之前，侧栏仍然向下移动。 – Gabrielcik 2013-05-14 11:13:12

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

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！

来源

2013-05-14 15:57:12 Gabrielcik

jQuery动画侧边栏问题

回答

相关问题