jQuery的固定側邊欄與內容移動，如果溢出

我有以下小提琴：http://jsfiddle.net/yFjtt/1/jQuery的固定側邊欄與內容移動，如果溢出

的想法是，用戶可以滾過頭，使側邊欄「粘」在地方，而他們進一步向下滾動頁面。

當他們靠近頁面底部時，它應該算出剩下多少空間以及側欄需要多少空間，並添加一些負邊距以在保持固定位置的同時向上移動側欄。

這裏一切正常。

下一個問題是確保側欄只能移動到需要的位置，並且應該保持距離底部大約10個像素。通過這種方式，邊欄將被固定，直到它需要向上移動以顯示其內容，然後一旦顯示全部被再次從底部約10個像素卡住。

這裏就是我試圖做到這一點（見搗鼓完整的代碼）：

if($(window).scrollTop() > (documentHeight - sidebarHeight)) { 

     if(offsetBottom < 10) { 

     } 
     else { 
      $('div.sidebar').stop(true,false); 
      $('div.sidebar').animate({'margin-top':offset}, 300); 
     } 

    } else { 
     $('div.sidebar').stop(true,true); 
     $('div.sidebar').css({'margin-top':'0'}); 
    }

但是側邊欄還是太遠動了網頁...誰能幫助？我相信這只是一個簡單的錯誤，找出底部的偏移量。

來源

2012-11-21 Cameron

我認爲你有一個很好的嘗試，除了我不確定那些動畫在那裏做什麼。基本上你需要3次檢查，首先看看使用是否在標題之上，其次檢查它們是否在標題和側欄的最下限之間，最後如果它們低於該點。然後只需交換和更改類並根據需要修改最高值。

jsFiddle

var sidebarHeight = $('div.sidebar').height(); 
var documentHeight = $(document).height(); 
var headerHeight = $('div.header').height(); 

$(window).scroll(function() { 
    var margin = 10; 

    var sidebar_offset = documentHeight - sidebarHeight - (margin * 2); // double margin to account for top and bottom margins 

    if ($(window).scrollTop() > headerHeight && $(window).scrollTop() < sidebar_offset) { 
     // below header, but above the sidebar offset limit 
     $('div.sidebar').addClass('fixed'); 
     $('div.sidebar').css('top', '');  
    } 
    else if ($(window).scrollTop() <= headerHeight) { 
     // above header 
     $('div.sidebar').removeClass('fixed'); 
     $('div.sidebar').css('top', ''); 
    } 
    else { 
     // past the sidebar offset limit 
     $('div.sidebar').removeClass('fixed'); 
     $('div.sidebar').css('top', documentHeight - sidebarHeight - margin); 
    } 
});

來源

2012-11-21 18:01:47

jQuery的固定側邊欄與內容移動，如果溢出

回答

相關問題