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動畫側邊欄問題

回答

相關問題