Tôi có các div trong trang web của mình với hình nền, vị trí tuyệt đối và chỉ mục z -1 để làm cho hình ảnh tĩnh và cuộn phần còn lại của các div lên trên những hình ảnh đó. Nó hoạt động hoàn hảo trong trình duyệt web, nhưng tôi không thể có được chức năng tương tự trên điện thoại của mình. Chế độ xem trên thiết bị di động trong trình duyệt web hiển thị chính xác cách nó hoạt động, nhưng các div còn lại không cuộn hình ảnh trong trình duyệt trên thiết bị di động, nhưng không giống như trình duyệt web, hình ảnh cũng cuộn.

Đây là Liên kết JsFiddlecho đoạn mã sau.

HTML

 
    
lorem ipsum dolar imit

    

       

    

    
lorem ipsum dolar imit
      

CSS

phần thân{lề:0; phần đệm:0;}
.container{height:800px; vị trí:tương đối;}
.section1{
    chiều rộng: 100%; 
    chiều cao: 400px; 
    màu nền: tím;
    màu: trắng; 
    chỉ số z:10;
}  
.section2, .section3{
    chiều rộng: 100%; 
    chiều cao: 300px; 
    overflow:hidden; 
    vị trí: tương đối;
}
.section3-img{
    kích thước nền: bìa;
    chỉ số z:-100;
    chiều rộng: 100%;
    chiều cao: 300px;
    vị trí: tuyệt đối;
    nền:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') Đã sửa lỗi lặp lại 0 trên cùng;

Tái bút: Tôi cũng đang thử nghiệm trình duyệt chrome trên điện thoại Android của mình.

câu trả lời hay nhất

Chà, tôi muốn đặt một thùng chứa có hình ảnh cố định. Bởi vì, vùng chứa phần3 và phần3-img của bạn cuộn. Vì vậy, việc định vị ảnh nền là cố định sẽ dẫn đến câu hỏi Cố định để làm gì? Rõ ràng các trình duyệt di động xác định nó được ghim vào cha mẹ. Và vì vùng chứa chính di chuyển bằng thao tác vuốt nên hình nền cũng di chuyển.

Tôi định vị một div cố định:https://jsfiddle.net/mh7eza4e/8/

HTML

  

  
lorem ipsum dolar imit

  

  
lorem ipsum dolar imit

CSS

html,nội dung{lề:0; phần đệm:0;chiều cao:100%;}
.container{height:800px; vị trí:tương đối;}
.section1{width:100%; chiều cao:400px; màu nền:màu tím;màu:màu trắng; 
.section2, .section3{ chiều rộng: 100%; chiều cao: 300px; tràn: vị trí ẩn;

.bg-img{
  vị trí: cố định; chỉ mục z: -100;
  chiều rộng:100%;chiều cao:100%;chiều cao:100vh;
  /* "height:100%" làm dự phòng cho các trình duyệt cũ hơn, chỉ sử dụng nếu cần */

  nền:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') Đã sửa lỗi lặp lại 0 trên cùng;
  kích thước nền: bìa;
}

Nếu bạn đang theo đuổi nhiều hình nền cố định cho mỗi phần thì CSS thuần túy có thể không thực hiện được. Từ đây trở đi bạn cần sử dụng JS.

Xem ở đây:https://jsfiddle.net/mh7eza4e/17/

JS

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

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

    $('.section').each( function() {
        var $section = $(cái này),
            elemTop = $section.offset().top,
            phầnHeight = $section.outerHeight();

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

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

Dựa trên vị trí cuộn tương ứng với khung nhìn, tôi đặt'tích cực' loại. Phần sự kiện kích hoạt chuyển tiếp CSS (sử dụng độ mờ) cho nhiều vùng chứa hình nền ở vị trí cố định.

Về css - hình ảnh tuyệt đối không tuyệt đối trong trình duyệt di động, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/37693117/