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

在我的项目中，我需要在容器的可见部分的中心显示小图像，相对于窗口，即.loader。即使用户滚动页面，图像也应该在.loader的中心可见。保持背景图像的固定位置和居中

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

这实际上是正常的行为，但在这些边缘案例中，我希望图像坚持顶部/底部容器的。

我想要什么：

请将小图像总是在.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>

来源

2014-03-04 Mr_Green

对不起，如果只是我不明白的问题。 –

@ C-link我加了一些解释。如果你仍然不明白，请告诉我。 –

你应该使用jquery！ –

下面是一个有效的解决方案与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();  
});

来源

2014-04-18 20:49:47

非常感谢..不知何故，我没有得到平你的答案..我重新回到我的帖子要求赏金，并找到你的解决方案..我认为这是不可能的只有CSS。 –

-1

要实现什么，我想你想要的。我们必须将.loader div的位置设置为固定，然后它将始终保持其放置位置，无论用户是否滚动页面，div都将滚动。在这里是如何设置装载器的位置固定在CSS（你可能还需要得到你的固定div的位置）：

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

这是你的upadted的jsfiddle：http://jsfiddle.net/Ezhb4/4/

来源

2014-03-04 11:18:56 Xanco

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

它可能不会出现，因为JSFiddle结果窗口很小，试试这个：http://fiddle.jshell.net/Ezhb4/4/show/ – Xanco

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

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

回答

相关问题