How can I trigger a function when a section touches the top of the viewport with Vanilla JS?

Question

I basically want the browser to trigger a function when a section touches the top of the viewport as the user scrolls and I'm not really sure how to do this with Vanilla JS.

I've found some jQuery alternatives, but I'm just trying to figure out how Javascript works at the moment, so I'm not exactly sure where to begin or what to google for that matter.

Possible duplicate of [How to tell if a DOM element is visible in the current viewport?](https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) — Liam, Mar 15 '19 at 10:50
@Liam - that is not a good dup anymore. the answers are far too old. — Randy Casburn, Mar 15 '19 at 10:58
Although the question asks about jQuery, the answer addresses this as plain JS> Please see my answer to this question: https://stackoverflow.com/questions/55093726/jquery-hide-when-a-class-appears-in-viewport — Randy Casburn, Mar 15 '19 at 10:58
So add an up to date answer @RandyCasburn a duplicate **question** is a **question** that has already been asked. This question has already been asked and answered — Liam, Mar 15 '19 at 11:21

Flyer53 · Accepted Answer · 2019-03-18T08:47:07.820

3

The following example creates a page with a single div inside. The scroll event handler uses Element.getBoundingClientRect() in order to get the div's position relative to the viewport and logs a msg to the console when the div is at or above the top edge of the viewport.

var handlerFired;
window.addEventListener('scroll', function(e){
  var containerTop = document.querySelector('.container').getBoundingClientRect().top;
  if (containerTop <= 0) {
    if (!handlerFired) {
      handlerFired = 1;
      console.log('container at top of viewport or above');
    }    
  }
  if (containerTop > 0) {
    handlerFired = 0;
  }
});

body{
  height:2000px;
}
.container{
  width:300px;
  height:200px;
  border:5px solid red;
  position: absolute;
  top: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <div class='container'> <p>scroll window ...</p> </div>

</body>
</html>

edited Mar 18 '19 at 08:47

answered Mar 15 '19 at 12:25

Flyer53

754
6
14

This worked fantastic. Thank you! Just for reference, how would I be able to trigger something if it appeared from the bottom? I mean, the top is pretty straightforward, but not all screen sizes have the same height. – jollyjwhiskers Mar 18 '19 at 07:33
@jollyjwhiskers You mean the element moves into the viewport from the bottom up? Almost the same: `window.addEventListener('scroll', function(e){ var containerTop = document.querySelector('.container').getBoundingClientRect().top; if (containerTop <= window.innerHeight) { console.log('container appears at bottom'); } });` – Flyer53 Mar 18 '19 at 08:04
Thanks for the explanation! Doing it like this would trigger the function every single time I scroll and the container top is above the bottom(or top for that matter). If I just wanted it to fire off the function once as soon as it's past the set threshold and do nothing else (unless told, of course), is "getBoundingClientRec()" the thing for me, or should I use the "Intersection Observer API" like some other people have recommended? – jollyjwhiskers Mar 18 '19 at 08:14
@jollyjwhiskers - I updated the example above to fire only once. Whether you want to use this approach or an Intersection Observer is up to you. Browser support may be an issue. See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility – Flyer53 Mar 18 '19 at 08:44

How can I trigger a function when a section touches the top of the viewport with Vanilla JS?

1 Answers1