粘性長邊框

Question

我想弄清楚website是如何創建它們的粘性邊欄。有很多關於如何創建位置固定側邊欄的jQuery教程，但沒有一個專門解決長邊欄問題。

最佳的代碼，我可以想出到目前爲止是這樣的：

$(function() { 
var lst = 0; 
var height = $('.sidebar').height(); 
var offset = $(".sidebar").offset(); 
$(window).scroll(function() { 
    if ($(window).scrollTop() > lst) { //downscroll 
     if ($(window).scrollTop() > offset.top) { 
      $(".sidebar").stop().animate({ 
       marginTop: $(window).scrollTop() - 100 
      }); 
     } else { 
      $(".sidebar").stop().animate({ 
       marginTop: 0 
      }); 
     } 
    } else { //upscroll 
     if ($(window).scrollTop() < offset.top) { 
      $(".sidebar").stop().animate({ 
       marginTop: 0 
      }); 
     } 
    } 
    lst = $(window).scrollTop(); 
}); 
}); 

的jsfiddle here。如果有人能幫助我指出正確的方向，將不勝感激。謝謝！

Answer 1

嘿，我看着他們的代碼，跟着它的一個獨特的部分，這導致我在這裏 http://foundation.zurb.com/old-docs/f3/grid.php。看起來他們的網格系統幾乎與twitter bootstraps相同，儘管我從來沒有與推特工作過。該鏈接中與您有關的部分似乎正在使用偏移量，更重要的是阻止網格。

Answer 2

對不起，兩年後重新打開這篇文章，但對於搜索如何粘貼一個長/巨大的側邊欄的人會有所幫助。回收你的代碼，你只需要調整兩行，你會得到預期的效果：

$(function() { 
    var lst = 0; 
    var height = $('.sidebar').height(); 
    var offset = $(".sidebar").offset(); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > lst) { //downscroll 
      if ($(window).scrollTop() > offset.top) { 
       $(".sidebar").stop().animate({ 
        marginTop: $(window).scrollTop() - 100 
       }); 
      } else { 
       $(".sidebar").stop().animate({ 
        marginTop: 0 
       }); 
      } 
     } else { //upscroll 
      if ($(window).scrollTop() < offset.top) { 
       $(".sidebar").stop().animate({ 
        marginTop: $(window).scrollTop() 
       }); 
      } 
     } 
     lst = $(window).scrollTop(); 
     offset = $(".sidebar").offset(); 
    }); 
}); 

Althoug它通常是編碼交替的CSS屬性position: fixed和position: relative，當你想滾動和停止邊欄（如WordPress的時編輯帖子/頁做），這是另一個版本時這個屬性不符合我們的CSS兼容：

$(function() {  
    var lst = 0; 
    var sidebar = $('.sidebar'); 
    var container = sidebar.parent('div').height()+400; 
    var height = sidebar.height(); 
    var offset = sidebar.offset(); 
    $(window).scroll(function() { 
     if ($(window).width()>768) { 
      if ($(window).scrollTop() > lst) { //downscroll 
       var bottom_trigger = parseFloat(sidebar.css('paddingTop')) + parseFloat(offset.top) + height; 
       if (($(window).scrollTop()+$(window).height()) > (bottom_trigger) && ($(window).scrollTop()+$(window).height()) < container) { 
        sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst)); 
       } 
      } else { //upscroll 
       var top_trigger = parseFloat(sidebar.css('paddingTop'))+parseFloat(offset.top)-100; 
       if ($(window).scrollTop() < top_trigger) { 
        sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst)); 
       } 

      } 
      lst = $(window).scrollTop(); 
     } 
});