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

在我的项目中，我需要在容器可见部分的中心显示一个关于窗口的小图像，即

.loader

。即使用户滚动页面，图像也应该在

.loader

的中心可见

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

这实际上是正常的行为，但在这些边缘情况下，我希望图像粘贴到

.loader

容器的顶端/底端

我想要的是：

• 将小图像始终保持在

  .loader

  容器的中心。（我已经实施了这个）
• 当滚动到

  .loader

  container的任意一端时，图像应粘贴到该端，而不是隐藏在容器后面

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

.header{
高度：600px；
宽度：650px；
背景颜色：灰色；
}
.左侧{
高度：300px；
宽度：150px；
浮动：左；
背景色：红色；
}
.加载器{
背景图像：url（'http://i.imgur.com/U2njI.jpg');
左边距：150像素；
高度：1500px；
宽度：500px；
背景位置：345像素中心；
背景重复：无重复；
背景附件：固定；
背景颜色：矢车菊蓝；
}
.页脚{
高度：600px；
宽度：650px；
背景颜色：银色；
}

---

以实现我认为您想要的。我们必须将.loader div的位置设置为fixed，然后它将始终保持在它所在的位置，无论用户是否滚动页面，div也将滚动。下面是如何在CSS中将加载程序的位置设置为fixed（您可能还需要获得fixed div的位置）：

---

这是您的升级版JSFIDLE:

这是一个使用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=装入器.style.backgroundPosition，
图像高度=141；
函数onScroll（）{
var scrollTop=document.documentElement.scrollTop | | document.body.scrollTop；
如果（loaderTop>=（scrollTop+（window.innerHeight-imageHeight）/2））{
loader.style.backgroundPosition='345px'+（loaderTop-scrollTop）+'px'；
}否则如果（loaderBottom Xanco，主容器在哪里？我的意思是
.loader
。它可能不会出现，因为JSFIDLE结果窗口太小，请尝试以下操作：它应该出现，它是我项目中的主容器。您的JSFIDLE中是否有其他HTML/CSS未包含？在这里效果很好：我已经注释掉了背景颜色，在CSS中，如果你想知道的话，如果我不能理解这个问题就好了。@C-link我添加了一些解释。如果你仍然不能理解，请告诉我。你应该使用jquery！@U Green先生-这是什么位置：sticky适合。请参阅和（然后）[此处]（）-如果您启用了flag@Danield感谢您提供的这些非常酷的信息。我希望这将对未来的用户有所帮助。：）顺便说一句，随着chrome引擎升级为blink，该标志现在被更改。非常感谢..不知何故，我没有得到ping的回答..我重新访问了我的帖子，请求赏金并找到了你的解决方案..我认为仅使用css是不可能的。
.loader{
    position: fixed;
    left: 100px;
    top: 300px;
 }

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