1

我将如何使用 Jquery 制作一个粘在浏览器底部的页脚，直到它在内容结束前达到 350 像素。基本上我在内容底部有另一个大页脚，我希望粘性页脚保持粘性，直到您滚动到 350px 页脚，它会保持在最后一个页脚的顶部，以便您可以阅读内容

基本上类似于制作一个粘性页脚，然后在内容底部的底部之前 350 像素停止粘性页脚并使其与页面一起滚动。

我在网上找到了这个，但我知道找出内容结尾的代码，而不是可查看浏览器的结尾，会有所不同......虽然它确实可以作为一般的粘性页脚

$(function(){
positionFooter(); 
function positionFooter(){
    if($(document).height() < $(window).height()){
        $("#globalFooter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#globalFooter").height())+"px" - })
    }   
}

$(window)
    .scroll(positionFooter)
    .resize(positionFooter)
});
4

2 回答 2

3

我编写了一个示例来演示如何创建粘性页脚。在示例中，该值bottomBound将是您的其他非粘性页脚的高度。

使用DOCTYPE声明很重要，因为$(window).height()没有它就会中断。

代码在这里：GitHub -stickyFooter和JSFiddle。

对于那些对使用页眉而不是页脚感兴趣的人，这里还有一些例子：GitHub - stickyNav

编辑：重组答案。

于 2012-11-28T08:25:15.407 回答
1

我想你的意思是这样的：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");
    }
});​
于 2012-11-28T08:47:43.333 回答