Question

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

基本上就像制作一个粘性页脚，然后在内容底部停止粘性页脚并使其随页面滚动的底部之前350px。

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

$(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)
});

Answer 1

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

使用DOCTYPE声明非常重要，因为$(window).height()会在没有它的情况下中断。

代码在此处：GitHub - stickyFooter和JSFiddle。

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

编辑：重组答案。

Answer 2

我想你的意思是这样的：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");
    }
});

Jquery粘性页脚在页面内容底部之前停止350px

2 个答案: