除非页脚可见，否则使元素固定在窗口底部

Question

我为我的网站设置了一个粘性页脚，实现方式如下。

html {
    position: relative;
    min-height:100%;
}

body {
    margin: 0 0 100px;
    text-align: center;
}

footer {
    position:absolute;
    left:0;
    bottom:0;
    height:100px;
    width:100%;
    background-color:red;
}

这个很好用。当内容较短时，页脚会固定在底部：

当内容很长时，页脚会被推下：

我现在想在页面两侧放置一张图片，位于页脚顶部，如下所示：（灰色框表示图片）

当内容很长并且页脚被推下时，图像也应该向下移动：

然而，当内容太长以至于页脚超出视口时，图像应该保持粘在屏幕底部，如下所示：

我尝试了很多位置和显示的组合，已经失去了追踪，所以非常希望能得到一些指导，是否可以实现我想要的效果，如果可以，需要什么。 如果使用JQuery可以实现这个目标，我会很高兴。

- mashers

---

发布你的HTML代码，这些灰色图片有什么意义？ - Waxi

这个网站有很多HTML代码。你需要特定的部分吗？灰色框代表我想要固定在页脚顶部的图片。 - mashers

@mashers 我认为这些图片真的有助于理解所需的功能。 - Neil

我要求HTML代码，因为如果它是真正的粘性页脚，无论内容有多少，页脚都不应该下移，所以这本身就是一个问题，甚至在处理灰色部分之前。我知道你想要在顶部放置灰色框，但是为什么？最终目的是什么？它们是图像、文本还是间隔符？ - Waxi

@nfnneil - 你是指我在问题中使用的图片来说明吗？ - mashers

@Waxi - 如果内容超出视口，页脚应该向下移动。这就是它的预期功能。 - mashers

Answer 1

我会使用jQuery扩展scrollToFixed。它非常有效且代码简化。我为您编写了一个小例子：

注意：该扩展需要正确的HTML格式，请参阅此示例：https://pastebin.com/3gM7vvBR。

$(document).ready(function() {
    $('#footer').scrollToFixed( {
        bottom: 0,
        limit: $('#footer').offset().top,
    });
});

#footer {
  background:red;
  padding:10px;
  text-align:center;
}

body {
  padding:0;
  margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script>

<div style="background:blue;height:700px;"></div>
<div id="footer">Test footer</div>
<div>Testing more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuff</div>

了解更多有关此扩展的信息，请访问：

https://bigspotteddog.github.io/ScrollToFixed/

- Neil

---

如果您有任何其他问题，请评论提出。 - Neil

不，我只是在浏览器中运行它，但是HTML文件已上传到我的Web服务器而不是本地运行。这不是权限问题，因为包括了jQuery库。 - mashers

@mashers 我会调查一下。 - Neil

它仍然无法与另一个版本的scrollToFixed一起使用。你介意帮我看一下测试HTML页面吗？https://pastebin.com/tfWC6K7e - mashers

谢谢@nfnneil - mashers

Answer 2

我已经用 JQuery 设计出了一个解决方案。它非常简单。

HTML：

<div id='leftimage' class='sideImage' style='left:0px;'>
    <img src='playleft.png' style='width:100%;'>
</div>

<div id='rightimage' class='sideImage' style='right:0px;'
    <img src='playright.png' style='width:100%;'>
</div>  

<footer id='footer'>Footer content here</footer>

CSS：

.sideImage {
    position:fixed;
    bottom:100px;
    width:275px;
}

JQuery：

$(document).scroll(function(){
    repositionSideImages();
});

$( window ).resize(function() {
    repositionSideImages();
});

$(document).ready(function() {
    repositionSideImages();
});

function repositionSideImages() {   
    var footer = $("#footer");
    var footerTop = $(footer).offset().top;

    var scrollTop = $(document).scrollTop();
    var windowHeight = $(window).height();
    var windowBottom = scrollTop + windowHeight;

    repositionImage($("#leftimage"), windowBottom, footerTop, footer.height());
    repositionImage($("#rightimage"), windowBottom, footerTop, footer.height());
}

function repositionImage(image, windowBottom, footerTop, footerHeight) {
    if (windowBottom >= footerTop) {
        $(image).css({"position":"absolute", "bottom":footerHeight});
    }
    else {
        $(image).css({"position":"fixed", "bottom":"0px"});
    }
}

这其实很简单。当文档加载、滚动或调整窗口大小时，计算窗口底部位置。如果此点低于页脚顶部，则[部分]页脚在视口内，图像设置为绝对定位，底部设置为页脚高度，因此它们似乎粘在页脚上。否则，如果窗口底部点在页脚顶部之上，则页脚不在视口内，图像设置为固定定位，因此它们浮动在屏幕底部。

这非常平稳，因为没有每像素重新定位图像，只有在页脚越过窗口底部的边界时才交换它们的位置和底部属性。

这应该与JQuery的其他部分一样跨浏览器，因为它不使用任何神奇的东西。

- mashers