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!

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!

• javascript

• stackoverflow./questions/20673293/… – Mart Commented Nov 3, 2016 at 19:29
• 1 Those solutions use jquery. – kevinkt Commented Nov 3, 2016 at 19:30
• Oops fair sorry, but there are tons of examples that do use javascript – Mart Commented Nov 3, 2016 at 19:32
• But what is the problem of using jQuery? – Mart Commented Nov 3, 2016 at 19:32
• Trigger events when the window is scrolled to certain positions only has JavaScript. – Heretic Monkey Commented Nov 3, 2016 at 20:07

1 Answer 1

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.");
    }
}