動態地將相對定位的內容更改爲固定內容 - 錯誤

我有一個邊欄，其中包含的內容大於屏幕。隨着用戶向下滾動，我希望該內容能夠進入視圖直到最後一位。然後我希望它是固定的，這樣儘可能多的內容保留在屏幕上。當您在SO中發佈問題時，我確實希望它的工作方式與「類似問題」邊欄完全相同。在每個示例鏈接中向下滾動。在破損的案例中，請注意所有事情都會如此激動。動態地將相對定位的內容更改爲固定內容 - 錯誤

應該像這樣= http://jsfiddle.net/mrtsherman/G4Uqm/2/

但在這種情況下，打破= http://jsfiddle.net/mrtsherman/G4Uqm/1/

在它看起來就像當你訪問的網頁的頭被重新觸發滾動事件損壞的案例。這會導致後續的滾動事件觸發，然後將所有事情搞砸。我該如何妥善處理這個案子？我無法弄清楚。

$(document).ready(function() { 

var dynamic = false; 
var topOfSidebar = $("#sidebar").offset().top; 
var leftOfSidebar = $("#sidebar").offset().left; 
var botOfSidebar = topOfSidebar + $("#sidebar").height(); 
var botOfScreen = $(window).height() + $(window).scrollTop(); 

//if sidebar fits on screen then use fixed version of it 
if (botOfSidebar < $(window).height()) { 
    $("#sidebar").addClass("fixed"); 
    $("#sidebar").css("top", topOfSidebar); 
    $("#sidebar").css("left", leftOfSidebar); 
} 
else { 
    dynamic = true; 
} 
//toggle sidebar class when user scrolls 
$(window).scroll(function() { 
    console.log($("#sidebar").css("position")); 
    botOfScreen = $(window).height() + $(window).scrollTop(); 
    //return; 
    if (botOfSidebar < botOfScreen && dynamic) { 
     $("#sidebar").addClass("fixed"); 
     //$("#sidebar").css("bottom", 0); 
     //$("#sidebar").css("left", leftOfSidebar); 
    } 
    else if (dynamic) { 
     $("#sidebar").removeClass("fixed"); 
    } 
}); 
});

來源

2011-07-28 mrtsherman

所以我想出了一個我自己的。訣竅是將內容封裝在具有最小高度屬性的div中。如果我們將側欄切換爲固定，則div保存側欄的位置。因此不再調整屏幕大小。

.wrap創建DIV
.parent得到側邊欄的父（新DIV）
添加CSS屬性，其中最小高度側邊欄的高度。除去填充和餘量

$（「＃欄」） .wrap（ ''） .parent（）的CSS（「最小高度」，this.height（））的CSS（「填充」，「0px」） .css（「margin」，「0px」）;

來源

2011-08-24 14:25:02 mrtsherman

動態地將相對定位的內容更改爲固定內容 - 錯誤

回答

相關問題