waypoints on multiple elements - updating header

Question

I am using waypoints to change a headers text as the user scrolls down a list of images. As the image scrolls to 50% viewport height (50vh) the related text set by its data-title attribute is used to update the main header.

It works ok as you scroll down, but when you scroll up the headers are out of sync - I want the header to only show when its over the relevant image.

var headerPoint = $(".project").waypoint(
  function(direction) {
    var title = this.element.getAttribute("data-title");
    $("#header").text(title);
  },
  {
    offset: "50%"
  }
);

h1 {
  position:fixed;
left: 50%;
top:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
  text-align:center;
}

#projects {
  margin:0 auto;
  width:400px;
  padding-top:400px;;
}
.project {
  background:pink;
  width:400px;
  height:600px;
  margin-bottom:100px;
}



* {
  margin:0;
  padding:0;
  box-sizing: border-box
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div> 
  <div data-title="Header three" class="project">3</div> 
  <div data-title="Header four" class="project">4</div>  
</div>

So what exactly would you like to achieve? Because as far as I can see it works properly. — Krzysztof Janiszewski, May 14 '18 at 11:38
the header should have the text of the div it is over.. if you scroll down and then up you will see that this is not the case. E.g Header four stays over the 3rd div as you scroll up. — Gareth Jones, May 14 '18 at 11:41
It works properly. Every time image top is in 50% of viewport header is updated. — Krzysztof Janiszewski, May 14 '18 at 11:43
I guess I am using the wrong logic then - The correct header must always be over the correct div e.g header two over div 2 as you scroll up and down. — Gareth Jones, May 14 '18 at 11:50
Possible duplicate of [different offset for jquery waypoint "up" event](https://stackoverflow.com/questions/19181435/different-offset-for-jquery-waypoint-up-event) — Krzysztof Janiszewski, May 14 '18 at 11:52

Krzysztof Janiszewski · Accepted Answer · 2018-05-14T12:23:05.683

You can set two waypoints and check the direction.

For going down you have correct, and for going up my solution changes header when bottom of div hits bottom of viewport. Not when hits bottom of header.

You can try out some other offset values and I'm sure you'll get to exactly what you want. Here is a handy documentation

Here is an working example

var headerPoint = $(".project");

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'down') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);
    }
  },
  offset: '50%'
});

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'up') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);

      //console.log($(window).height());
      //console.log(this.element.clientHeight);
    }
  },
  offset: 'bottom-in-view'
});

h1 {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) -webkit-transform: translateY(-50%);
  transform: translateY(-50%) text-align:center;
}

#projects {
  margin: 0 auto;
  width: 400px;
  padding-top: 400px;
  ;
}

.project {
  background: pink;
  width: 400px;
  height: 600px;
  margin-bottom: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div>
  <div data-title="Header three" class="project">3</div>
  <div data-title="Header four" class="project">4</div>
</div>

EDIT

Now it works exactly the way you wanted (when going up triggers when bottom in the middle of the screen).

var headerPoint = $(".project");

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'down') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);
    }
  },
  offset: '50%'
});

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'up') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);

      //console.log($(window).height());
      //console.log(this.element.clientHeight);
    }
  },
  offset: function() {
    return -this.element.clientHeight + ($(window).height()/2);
  }
});

h1 {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) -webkit-transform: translateY(-50%);
  transform: translateY(-50%) text-align:center;
}

#projects {
  margin: 0 auto;
  width: 400px;
  padding-top: 400px;
  ;
}

.project {
  background: pink;
  width: 400px;
  height: 600px;
  margin-bottom: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div>
  <div data-title="Header three" class="project">3</div>
  <div data-title="Header four" class="project">4</div>
</div>

waypoints on multiple elements - updating header

1 Answers1