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

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>

- Mr_Green

---

抱歉，也许只有我无法理解这个问题。 - Bhojendra Rauniyar

@C-link 我添加了更多的解释，请让我知道你是否还是不理解。 - Mr_Green

你应该使用jQuery! - Bhojendra Rauniyar

@Mr_Green - 这就是 position:sticky 很好的应用场景。点击这里 here 和 here，以及（然后）[here] (http://jsfiddle.net/danield770/msUP9/) - 如果您启用了该标志 - Danield

@Danield 谢谢你提供这个酷炫的信息。我希望这对未来的用户有所帮助。:) 顺便说一句，由于 Chrome 引擎已经升级到 Blink，那个标志现在已经改变了。[链接]（http://www.chromium.org/blink/runtime-enabled-features） - Mr_Green

Answer 1

这里有一个使用javascript的可行解决方案，我希望它的行为符合您的期望。很遗憾我现在无法在IE9上测试它，但它应该能够工作（演示）：

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();    
});

- Marcel Gwerder

---

非常感谢。不知何故我没有收到您的回答。我重新访问了我的帖子以请求悬赏，并找到了您的解决方案。我认为仅使用CSS是不可能的。 - Mr_Green

Answer 2

为了实现您想要的效果，我们需要将 .loader div 的位置设置为 fixed，这样它就会始终停留在原位，无论用户是否滚动页面，该 div 也会随之滚动。以下是如何在 CSS 中将 loader 的位置设置为 fixed（您还可能需要获取固定 div 的位置）：

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

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

- Xanco

---

Xanco，主容器在哪里？我的意思是.loader。 - Mr_Green

由于JSFiddle结果窗口太小，可能无法显示，请尝试此链接：http://fiddle.jshell.net/Ezhb4/4/show/ - Xanco

它应该出现，它是我的项目中的主要容器。 - Mr_Green

你的JSFiddle里面有没有其他未包含的HTML/CSS代码？在这里它可以正常工作：http://postimg.org/image/enljqw9ah/ 我已经在CSS中注释掉了背景颜色，以防你想知道。 - Xanco