I can't apply position sticky to child element

Question

I have a test page on which I am testing position sticky.

I have this problem.

I applied position: sticky; on the first h1 that is inside .back1 and it works.

But, if I apply it on the second h1 that is inside .back4 it doesn't. It works only if I apply it on the parent (.back4).

Is this because on the first h1 I have set background-attachment: fixed ?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.back1 {
  background: lightpink;
  height: 100vh;
  background-size: cover;
}

.h1 {
  font-family: verdana;
  text-align: center;
  position: sticky;
  top: 0;
}

.h11 {
  font-family: verdana;
  color: red;
  text-align: center;
  position: sticky;
  top: 0;
  background: lightblue;
  padding-bottom: 100px;
  padding-top: 100px;
}


.back2 {
  background: lightgreen;
  height: 400px;
  background-size: cover;
}

.back3 {
  background: powderblue;
  height: 400px;
  background-size: cover;
}

.back1, .back2, .back3 {
  background-attachment: fixed;
}

<div class="back1">
  <h1 class="h1">PARALLAX &nbspEFFECT</h1>
</div>

<!-- TEST -->
<div class="back4">
  <h1 class="h11">PARALLAX &nbspEFFECT</h1>
</div>
<!-- TEST -->


<div class="section1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis excepturi vel quaerat autem vitae corrupti ut sapiente? Ipsa asperiores odio perspiciatis vitae in! Ex ducimus numquam, nesciunt vel maiores fuga in eaque iure fugiat perspiciatis tempore ipsum magni necessitatibus ratione cum harum illum consequuntur earum praesentium impedit tenetur adipisci odio provident. Esse deleniti fugiat dolorem obcaecati quae. Animi corporis, eos laboriosam numquam! Quae labore minus modi, cupiditate ea culpa deleniti, mollitia ipsam recusandae numquam amet cumque, ad eius. Harum aspernatur hic consectetur obcaecati est deleniti aperiam repellendus voluptate alias. Ducimus cumque sapiente reprehenderit veniam ratione nostrum enim odio accusantium dicta.</p>
</div>


<div class="back2"></div>
<div class="section2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis excepturi vel quaerat autem vitae corrupti ut sapiente? Ipsa asperiores odio perspiciatis vitae in! Ex ducimus numquam, nesciunt vel maiores fuga in eaque iure fugiat perspiciatis tempore ipsum magni necessitatibus ratione cum harum illum consequuntur earum praesentium impedit tenetur adipisci odio provident. Esse deleniti fugiat dolorem obcaecati quae. Animi corporis, eos laboriosam numquam! Quae labore minus modi, cupiditate ea culpa deleniti, mollitia ipsam recusandae numquam amet cumque, ad eius. Harum aspernatur hic consectetur obcaecati est deleniti aperiam repellendus voluptate alias. Ducimus cumque sapiente reprehenderit veniam ratione nostrum enim odio accusantium dicta.</p>
</div>

<div class="back3"></div>

<div class="section3">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis excepturi vel quaerat autem vitae corrupti ut sapiente? Ipsa asperiores odio perspiciatis vitae in! Ex ducimus numquam, nesciunt vel maiores fuga in eaque iure fugiat perspiciatis tempore ipsum magni necessitatibus ratione cum harum illum consequuntur earum praesentium impedit tenetur adipisci odio provident. Esse deleniti fugiat dolorem obcaecati quae. Animi corporis, eos laboriosam numquam! Quae labore minus modi, cupiditate ea culpa deleniti, mollitia ipsam recusandae numquam amet cumque, ad eius. Harum aspernatur hic consectetur obcaecati est deleniti aperiam repellendus voluptate alias. Ducimus cumque sapiente reprehenderit veniam ratione nostrum enim odio accusantium dicta.</p>
</div>