Change text in fixed div as you scroll through website

Question

I'm trying to get the text in the fixed div to change as you scroll past the main divs that contain the images. I tried following the solution in Changing div content based on scroll position but it won't work. Here is my attempt using that method: http://jsfiddle.net/st6q1Lmo/5/.

I'm a beginner so it's hard for me to write code from scratch. I must be doing something wrong... I would appreciate any help. Thank you!

This is my HTML and CSS without any JS (http://jsfiddle.net/7tdnw1eb/6/):

UPDATE: Thanks to the lead @tera_789 gave me, I've almost got it to work. For the first and third div it works, but for the second the content won't update in the fixed div. I know it could be because the video is only 90vh and the video itself won't scroll in the container... However I need it to be 90vh. How can I get around this? 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>

score 0 · Answer 1 · answered Sep 15 '18 at 08:10

0

Take a look at this: onscroll event

answered Sep 15 '18 at 08:10

tera_789

489
4
20

Hey, I've almost got it to work. For the first and third div it works, but for the second it won't. I know it's maybe because the video is only 90vh and the container won't scroll. However I need it to be 90vh. How can I get around this? http://jsfiddle.net/7tdnw1eb/12/ – AFG Sep 15 '18 at 16:31

Change text in fixed div as you scroll through website

1 Answers1