javascript - 如何在滚动时增加 div 高度/paddint-top 并检测到 div 的图像冲突？

Question

文本正在滚动，我可以根据固定的滚动值停止文本。

但是 Home div 的高度是 100vh，所以并不是所有的屏幕分辨率都会在相同的滚动值中停止文本。因此，当它达到某个滚动值时，我需要动态停止，这在其他分辨率中可能会有所不同。（或到达某个#Element时停止）

此外，根据前面的段落解释，我需要在滚动时增加描述 div paddingTop 的值以在该 div 内插入文本，并在到达某个点时停止增加高度并停止文本移动。

我准备使用一些效果库或其他任何东西，但更喜欢使用 vanilla-js，很高兴了解它是如何工作的。

我做了这个例子：https ://jsfiddle.net/ja0hzydw/4/

HTML

<section name="Home" id="home">
  <div class="home">
    <div class="logo" id="logo">
      <p>T</p>
      <p>E</p>
      <p>X</p>
      <p>T</p>
    </div>
  </div>
</section>
<section name="Description" id="description">
  <div class="description">
    <div class="description-title" id="descTitle">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="description-text">
      <p id="descParagraph1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa ac sem aliquam, et convallis est feugiat. Nunc ut diam orci. Nunc sed malesuada tortor. Donec orci diam, ultricies eget magna auctor, facilisis elementum metus.                  
      </p>
      <p id="descParagraph2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa ac sem aliquam, et convallis est feugiat. Nunc ut diam orci. Nunc sed malesuada tortor.
      </p>
    </div>
  </div>
</section>

CSS

body, html {
    margin: 0;
    padding: 0;
}

.home {
    background-image: url("https://www.wallpapertip.com/wmimgs/0-236_440px-animated-wallpaper-windows.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.logo {
    margin-top: 0px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}

.description {
    padding-bottom: 100px;
    margin: 0 auto;
    max-width: 550px;
    text-align: center;
}

Javascript

window.onscroll = function() {
    scrollLogo();
};

function scrollLogo() {
    var element = document.getElementById("logo");
    var scrollValue = 80;
    if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
        element.style.marginTop = "80px";
        element.style.position = "absolute";
    } else {
        element.style.marginTop = "0px";
        element.style.position = "fixed";
    }
    var descriptionHeight = document.getElementById("descTitle");
    descriptionHeight.style.padding = "50px 0px 0px 0px";
    console.log("document.body.scrollTop", document.body.scrollTop, "document.documentElement.scrollTop", document.documentElement.scrollTop);
}

标签： javascripthtmljquerycss