保持背景图像固定位置和居中

Question

在我的项目中，我需要在容器可见部分的中心（相对于窗口）显示一个小图像，即.loader。即使用户滚动页面，图像也应该在.loader 的中心可见。

我成功实现了这一点，但现在我面临一个边缘情况，即当用户将页面“向上滚动到页眉”或“向下滚动到页脚”时，小图像被隐藏了。 demo。

这实际上是正常行为，但在这些边缘情况下，我希望图像贴在.loader 容器的顶部/底部。

我想要什么：

• 将小图像始终保持在.loader 容器的中心。 （我已经实现了这个）
• 当滚动到.loader 容器的任何一端时，图像应保持在该端，而不是隐藏在容器后面。

Fiddle

首选仅使用 css 的解决方案。我正在寻找 IE9+、chrome 和 firefox 中的浏览器支持。

.header {
    height: 600px;
    width: 650px;
    background-color: grey;
}
.left-side {
    height: 300px;
    width: 150px;
    float: left;
    background-color: red;
}
.loader {
    background-image: url('http://i.imgur.com/U2njI.jpg');
    margin-left: 150px;
    height: 1500px;
    width: 500px;
    background-position: 345px center;  
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: cornflowerblue;
}
.footer {
    height: 600px;
    width: 650px;
    background-color: silver;
}

<div class="header"></div>
<div class="left-side"></div>
<div class="loader"></div>
<div class="footer"></div>

Answer 1

这是一个使用 javascript 的有效解决方案，我希望它的行为是您所期望的。不幸的是，我现在无法在 IE9 上对其进行测试，但它应该可以工作 (DEMO)：

document.addEventListener('DOMContentLoaded',function() {
    var loader = document.querySelector('.loader'),
        loaderRect = loader.getBoundingClientRect(),
        loaderTop = loaderRect.top + document.body.scrollTop,
        loaderBottom = loaderTop + loader.offsetHeight,
        initialBgPos = loader.style.backgroundPosition,
        imageHeight = 141;

    function onScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(loaderTop >= (scrollTop + (window.innerHeight - imageHeight)/2)) {
            loader.style.backgroundPosition='345px ' + (loaderTop - scrollTop) + 'px'; 
        } else if(loaderBottom <= (scrollTop + (window.innerHeight + imageHeight)/2)) {
            loader.style.backgroundPosition='345px ' + (loaderBottom - scrollTop - imageHeight) + 'px'; 
        } else {
           loader.style.backgroundPosition = initialBgPos;
        }
    }

    window.addEventListener('scroll', onScroll);
    onScroll();    
});

Answer 2

实现我认为你想要的。我们必须将 .loader div 的位置设置为固定，然后它会一直停留在它所在的位置，无论用户是否滚动页面，div 也会滚动。下面介绍如何在 CSS 中将 loader 的位置设置为固定（您可能还需要获取固定 div 的位置）：

.loader{
    position: fixed;
    left: 100px;
    top: 300px;
 }

这是您更新的 JSFiddle：http://jsfiddle.net/Ezhb4/4/