我該如何改進這個粘性頁腳代碼並修復一個小問題？

出於某種原因，您需要在jsfiddle中拖動窗口才能實現，但它在上下文中正常工作。我該如何改進這個粘性頁腳代碼並修復一個小問題？

這個背後的想法是，如果內容超過窗口的高度，它將removeClass「.sticky」這是將頁腳絕對下降到頁面的底部。否則，它是一個粘性的頁腳。

它應該很漂亮。我的問題是，一段時間，頁腳剪下內容。當部分[role =「main」]的淺綠色背景遇到頁腳的紫色背景並且稍後不是像素時，我希望它將removeClass「.sticky」移除。我似乎無法做到這一點。

頁腳始終是相同的高度...我可以只從它減去它？這裏

$(document).ready(function(){ 
$('aside[role="sidebar"]').height($(window).height()); 

if($('section[role="main"]').height() >= $(window).height()) { 
    $('.footer').removeClass('sticky'); 
} 

$(window).resize(function(){ 
    $('aside[role="sidebar"]').height($(window).height()); 

    if($('section[role="main"]').height() <= $(window).height()) { 
     $('.footer').addClass('sticky'); 
    } 
    else { 
     $('.footer').removeClass('sticky'); 
    } 
}); 
});

工作例如： http://jsfiddle.net/LxvQ9/確保調整讓它去initallly。同樣，這是jsFiddle的一些問題。在我的網站onLoad上正常工作。

感謝您的任何幫助。

來源

2013-08-06 Elliot

在計算任何元素的height時，我們還需要考慮padding和border（如果有的話）。

在jQuery中，我們使用outerHeight來獲取任何元素的高度，包括padding和border。

所以，就你的情況而言，我們只使用height，這就是爲什麼一些文本正在裁剪。

使用以下代碼來正確計算height並更新頁腳類。

JavaScript代碼

$(function(){ 
    //When Window is Resized 
    $(window).resize(makeFooterSticky); 
    //Run once on page load 
    mkaeFooterSticky(); 
}); 

function makeFooterSticky() { 

    $('aside[role="sidebar"]').height($(window).height()); 

    if($('section[role="main"]').outerHeight() <= $(window).height() - $('.footer').outerHeight()) { 
     $('.footer').addClass('sticky'); 
    } else { 
     $('.footer').removeClass('sticky'); 
    } 
}

希望這應該工作。

讓我知道是否有任何問題。

JSFiddle Demo：http://jsfiddle.net/hVzat/3/

來源

2013-08-06 08:58:31

我該如何改進這個粘性頁腳代碼並修復一個小問題？

回答

相關問題