移動瀏覽器中的絕對圖像不會保持絕對

Question

爲了使圖像靜止並在這些圖像上滾動div的其餘部分，我在網頁中使用了背景圖像，絕對位置和-1 z-index。它在Web瀏覽器中的工作完美無瑕，但我無法在手機中獲得相同的功能。網頁瀏覽器中的移動視圖顯示了它應該工作的方式，但其餘的div不會在移動瀏覽器中滾動瀏覽這些圖像，而與web瀏覽器不同，圖像也會滾動。

下面是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：我在android手機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'); 

根據相對於我設置'活躍'類目前在視口中的部分視滾動位置上。活動部分觸發多個固定位置的背景圖像容器的CSS轉換（使用不透明度）。