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

Question

我的网页中有带有背景图像、绝对位置和 -1 z-index 的 div，以便使图像静态并在这些图像上滚动 div 的其余部分。它在网络浏览器中完美运行，但我无法在手机中获得相同的功能。网络浏览器中的移动视图准确地显示了它应该工作的方式，但其他 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');

根据相对于视口的滚动位置，我将 'active' 类设置为当前在视口中的部分。活动部分触发多个固定定位的背景图像容器的 CSS 转换（使用不透明度）。