JS / CSS Проблема с фиксированным положением / залипание - PullRequest
Новая
       30

JS / CSS Проблема с фиксированным положением / залипание

0 голосов
/ 22 апреля 2020

Например, у меня есть 3 полноэкранных раздела:

  1. заставка
  2. о
  3. содержание

Как я могу сделать 2 положение секции фиксировано / закреплено на scrollY между 200hv и 300hv (и не влияет на абсолютные и c положения элементов внутри 2 секции)? Таким образом, я вижу 2 раздела на стандартных 2 и 3 «страницах», в то время как 3 раздел будет приходить только при прокрутке до 4 «страницы».

При попытке я потерял все свои свойства innersection - bg_2 просто исчез (это является анимацией svg img).

HTML: 

<body>
<div class="section section_intro"></div>
<div class="section section_two" id="section_two">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/400x400"></a>
<div class="bg_2" id="bg_2"></div>
</div>
</body>

JS: 

let section_two = document.getElementById("section_two");

window.addEventListener('scroll', function () {
   let value = window.scrollY;
   if (value > 610) {
      section_two.style.position = "fixed";
      section_two.style.top = 0;
     };
});

let bg_2 = document.getElementById("bg_2");

window.addEventListener('scroll', function () {
   let value = window.scrollY;
   bg_2.style.backgroundSize = 100 + value*0.7 + 'px';
});

CSS: 

.bg_2 {
   position: absolute;
   top: 100vh;
   left: 0;
   height: 100%;
   width: 100%;
   background: #FFF176 url(heart.svg); /*img from here https://www.flaticon.com/free-icon/heart_1077086*/
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100px;
...