javascript - 保持背景图像固定位置并居中

Question

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

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

这实际上是正常行为，但在这些边缘情况下，我希望图像粘贴到 .loader 容器的top/bottom end。

我想要的:

• 将小图像始终放在 .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();    
});