Tôi có thể làm cho văn bản có vẻ cố định trong khi di chuyển trên hình nền cố định không?

Question

Here is my fiddle

Tôi đang cố gắng để tạo ra một trang web, nơi người dùng có thể di chuyển qua nhiều hình ảnh toàn màn hình đã được xếp chồng các phần tử HTML có vẻ như là cố định (không di chuyển trên cuộn).

Trong fiddle của tôi, bạn có thể thấy rằng tôi hiện đang có văn bản vị trí tuyệt đối và họ di chuyển tương đối so với cha mẹ của họ. Thay vào đó, tôi muốn định vị văn bản mà tôi muốn nó xuất hiện trên mỗi hình nền, sau đó khi người dùng cuộn xuống, văn bản vẫn cố định và sau đó được che phủ/phát hiện bởi phần tiếp theo (tùy theo hướng).

Tôi đã cố gắng sử dụng các giá trị position: fixed và z-index nhưng tôi luôn có thể thấy các phần tử cố định khi tôi muốn các phần tử cố định chỉ hiển thị với trang trình bày của riêng nó.

Thêm văn bản có tệp hình ảnh không đáp ứng các yêu cầu của tôi vì cuối cùng tôi muốn phần tử văn bản và video động nằm trong các yếu tố cố định này. Cảm ơn nhiều vì những hiểu biết của bạn.

Answer 1

Bạn không thể làm điều này bằng cách sử dụng css thuần túy. Vui lòng xem đoạn mã này.

$(window).scroll(function() { 
 
    $("section .cover-text").each(function() { 
 
    var marginTop = $(window).scrollTop() - $(this).parent().position().top; 
 
    $(this).css({ 
 
     'margin-top': marginTop 
 
    }); 
 
    }); 
 
});

#slide-1, 
 
#slide-2, 
 
#slide-3 { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.cover-1, 
 
.cover-2, 
 
.cover-3 { 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    height: 100vh; 
 
} 
 

 
.cover-1 { 
 
    background-image: url('http://placekitten.com/800/350'); 
 
    z-index: 3000; 
 
} 
 

 
.cover-2 { 
 
    background-image: url('http://placekitten.com/g/800/350'); 
 
} 
 

 
.cover-3 { 
 
    background-image: url('http://placekitten.com/800/355'); 
 
} 
 

 
.cover-text { 
 
    font-size: 25px; 
 
    color: #FFFFFF; 
 
    text-shadow: 0 0 30px #000000; 
 
    position: absolute; 
 
    left: 20%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%); 
 
    -moz-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    transform: translate(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="slide-1"> 
 
    <div class="cover-1"></div> 
 
    <div class="cover-text">Title 1</div> 
 
</section> 
 
<section id="slide-2"> 
 
    <div class="cover-2"></div> 
 
    <div class="cover-text">Title 2</div> 
 
</section> 
 
<section id="slide-3"> 
 
    <div class="cover-3"></div> 
 
    <div class="cover-text">Title 3</div> 
 
</section>