Question

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

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

这实际上是正常行为，但在这些边框中，我希望图像能够粘贴到.loader容器的顶部/底部。

我想要的是什么：

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

仅使用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的位置设置为fixed，然后它将始终保持在它放置的位置，无论用户是否滚动页面，div也会滚动。在这里是如何设置加载器的位置在CSS中固定（您可能还必须获得固定div的位置）：

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

这是你的升级JSFiddle：http://jsfiddle.net/Ezhb4/4/

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

2 个答案: