css - 绝对图像在移动浏览器中并不保持绝对

Question

我的网页中有带有背景图像、绝对位置和 -1 z-index 的 div，以便使图像静态并在这些图像上滚动其余的 div。它在网络浏览器中运行完美，但我无法在手机中获得相同的功能。网络浏览器中的移动 View 准确地显示了它应有的工作方式，但其余的 div 不会在移动浏览器中滚动这些图像，而是与网络浏览器不同，图像也会滚动。

这是 JsFiddle link对于以下代码。

HTML

<div class="container"> 
    <div class="section1">lorem ipsum dolar imit</div>
    <div class="section3">
       <div class="section3-img"></div>
    </div>
    <div class="section1">lorem ipsum dolar imit</div>      
</div>

CSS

body{margin:0; padding:0;}
.container{height:800px; position:relative;}
.section1{
    width:100%; 
    height:400px; 
    background-color:purple;
    color:white; 
    z-index:10;
}  
.section2, .section3{
    width:100%; 
    height:300px; 
    overflow:hidden; 
    position:relative;
}
.section3-img{
    background-size: cover;
    z-index:-100;
    width:100%;
    height:300px;
    position:absolute;
    background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;

PS:我还在安卓手机上测试 chrome 浏览器。

Answer 1

好吧，我宁愿放置一个固定图像的容器。因为，您的 section3 和 section3-img 容器滚动。因此，将背景图像定位为固定会导致问题固定为什么？显然移动浏览器将其定义为固定到父级。并且由于父容器随着滑动而移动，因此背景图像也会移动。

我定位了一个固定的 div:https://jsfiddle.net/mh7eza4e/8/

HTML

<div class="container">
  <div class="bg-img"></div>
  <div class="section1">lorem ipsum dolar imit</div>
  <div class="section3"></div>
  <div class="section1">lorem ipsum dolar imit</div>
</div>

CSS

html,body{margin:0; padding:0;height:100%;}
.container{height:800px; position:relative;}
.section1{width:100%; height:400px; background-color:purple;color:white; z-index:10;} 
.section2, .section3{ width:100%; height:300px; overflow:hidden; position:relative;}

.bg-img{
  position:fixed;z-index:-100;
  width:100%;height:100%;height:100vh;
  /* "height:100%" as a fallback for older browsers, use only if needed */

  background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;
  background-size:cover;
}

---

如果每个部分的多个固定背景图像是您所追求的，那么纯 CSS 恐怕是不可能的。从这里开始你需要使用 JS。

参见此处:https://jsfiddle.net/mh7eza4e/17/

JS

$(window).on('scroll', function() {

    var scrolledTop = $(window).scrollTop(),
        windowHeight = $(window).height();

    $('.section').each( function() {
        var $section = $(this),
            elemTop = $section.offset().top,
            sectionHeight = $section.outerHeight();

        if(elemTop-scrolledTop < windowHeight/2 && elemTop-scrolledTop > -sectionHeight) {
            $section.addClass('active');
        } else {
            $section.removeClass('active');
        }
    })
});

$(window).trigger('scroll');

根据相对于视口(viewport)的滚动位置，我为当前位于视口(viewport)中的部分设置了一个'active' 类。事件部分触发多个固定位置背景图像容器的 CSS 转换(使用不透明度)。