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，如果这对实现这个目标有用。

Answer 1

我会使用jQuery扩展名scrollToFixed。它是高效且简化的代码。我写了一个小例子给你看：

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

有关扩展程序的详细信息，请访问：

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

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一样跨浏览器，因为它不会使用任何神奇的东西。

除非可以看到页脚，否则使元素粘在窗口底部

2 个答案: