粘滯頁腳和動畫

我發現這個jsfiddle在這裏在stackoverflow，但由人提供的解決方案是非常跳動。 http://jsfiddle.net/BramVanroy/ZVzEe/我需要非常流暢的東西。粘滯頁腳和動畫

var secondary = $("#secondary-footer"); 

secondary.hide().addClass("fixed").fadeIn("fast"); 

$(window).scroll(function() { 
if (secondary.offset().top >= ($(document).height() - 350)) { 
    secondary.removeClass("fixed"); 
} 
else if(secondary + ":not('.fixed')") { 
    secondary.addClass("fixed"); 
} 
});

我需要怎麼粘頁腳的工作是爲它在頁面底部顯示的頁腳的窄條，同時還通過內容滾動。一旦滾動條到達頁面的底部，頁腳就會高度展開。

提供的jsfiddle非常接近我需要這個工作，但我需要非常流暢的東西。另一個說明，完全擴展頁腳的高度並不固定。感謝大家的幫助。

來源

2013-02-07 Pegues

demo

的jQuery

CSS

#content { 
    width: 90%; 
    margin: 0 auto; 
    padding: 0.5em; 
    background: #dedede; 
    position:relative; /* added this */ 
} 
#secondary-footer { 
    width: 100%; 
    height: 120px; 
    background: #666; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
} 

/* removed #secondary-footer.fixed and merged content with #secondary-footer */

來源

2013-02-07 21:43:11 kei

另一種解決方案：http://jsfiddle.net/27rNu/

jQuery

$(document).ready(function() { 
var secondary = $("#secondary-footer"); 
secondary.addClass("fixed"); 
var windowH = $('#wrapper').outerHeight(true); 
$(window).scroll(function() { 
    var scrollVal = $(this).scrollTop(); 
    if (scrollVal < (windowH - 350 * 2)) { 
     secondary.addClass("fixed"); 
    } 
    else { 
     secondary.removeClass("fixed"); 
    } 
});

}）;

我還在整個html中添加了一個「包裝器」div。

來源

2013-02-07 21:47:03 Craig

粘滯頁腳和動畫

回答

相關問題