时间戳

首页 > 解决方案 > 滚动浏览网站时更改固定 div 中的文本

javascript - 滚动浏览网站时更改固定 div 中的文本

问题描述

当您滚动经过包含图像的主 div 时，我试图让固定 div 中的文本发生变化。我尝试遵循根据滚动位置更改 div 内容中的解决方案，但它不起作用。这是我使用该方法的尝试：http: //jsfiddle.net/st6q1Lmo/5/。

我是初学者，所以我很难从头开始编写代码。我一定做错了什么......我会很感激任何帮助。谢谢！

这是我没有任何 JS 的 HTML 和 CSS（http://jsfiddle.net/7tdnw1eb/6/）：

更新：感谢@tera_789 给我的领导，我几乎可以开始工作了。对于第一个和第三个 div，它可以工作，但对于第二个，内容不会在固定 div 中更新。我知道这可能是因为视频只有 90vh 并且视频本身不会在容器中滚动......但是我需要它是 90vh。我怎样才能解决这个问题？jsfiddle.net/7tdnw1eb/12

body {
  background-color: #797979;
  color: black;
  font-family: serif;
  font-size: 2vw;
  line-height: 1.1em;
}

#about {
  padding-bottom: 1em;
}

#wrapper {
  max-width: 100vw;
  max-height: 100vh;
  overflow: scroll;
  padding-top: 1em;
  padding-bottom: 1em;
}

.project {
  background-color: transparent;
  width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
  padding: 0 2em;
  overflow: scroll;
}

.content__container {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#count {
  color: black;
  width: 20%;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em 2em 2em 0;
  z-index: 99999999999;
}

img {
  max-width: 100%;
}
<div id="wrapper">

  <div id="count">
    <p>1/3</p>
  </div>

  <div id="about">
    Wassup everyone
  </div>

  <div class="project">
    <div class="content__container">
      <img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
    </div>
  </div>

  <div class="project">
    <div class="content__container">
      <img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/09/funny-dog-thoughts-tweets-1.jpg">
    </div>
  </div>

  <div class="project">
    <div class="content__container">
      <img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
    </div>
  </div>

</div>

标签： javascriptjqueryhtmlscrollfixed

解决方案

看看这个：onscroll 事件

推荐阅读