Question

例如，我有3个全屏部分：

简介
关于
内容

如何在200hv和300hv之间的scrollY上固定2个区域的位置/使其保持粘性（并且不影响2个区域内的元素的绝对等位置）？因此，我在标准2和3'页面'上看到2部分，而3部分仅在滚动到4'页面'时出现。

在尝试时，我失去了所有的内部截面属性-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;

位置固定/粘滞的JS / CSS问题

0 个答案: