Trigger event after scrolling past element javascript only

Question

I'm looking for a javascript only solution to detect when my window has scrolled up past a certain element (like a div) and then trigger an event. In particular I need to show a navbar once I've scrolled past this element.

I can't use Jquery or other libraries. Plain JS.

Thanks!

Oops fair sorry, but there are tons of examples that do use javascript — Mart
– Mart, Commented Nov 3, 2016 at 19:32
Trigger events when the window is scrolled to certain positions only has JavaScript. — Heretic Monkey
– Heretic Monkey, Commented Nov 3, 2016 at 20:07

score 9 · Accepted Answer · 2016-11-03 19:59:56Z

9

Here is a JSFiddle Demo

You need to select the element that you want as the target.

var someElement = document.querySelector('whatever');

Then you need set an scroll event listener on the window object itself, which fires every time the user scrolls, then simply run a if statment to check if the element from the top of the screen is greater or equal to 0, if true run the following block of code.

window.onscroll = function(){
    //TOP
    if(someElement.getBoundingClientRect().top <= 0){
        console.log("TRIGGER: top of div reached.");
    }
    //BOTTOM
    if(someElement.getBoundingClientRect().bottom <= 0){
        console.log("TRIGGER: bottom of div reached.");
    }
}

edited Nov 3, 2016 at 19:59

answered Nov 3, 2016 at 19:53

user7892649

Sign up to request clarification or add additional context in comments.

1 Comment

kevinkt Over a year ago

Nice! This is exactly what I need. I also updated the fiddle with how I'd implement a fixed navbar.

Collectives™ on Stack Overflow

Trigger event after scrolling past element javascript only

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related