Trigger Event When User Scroll to Specific Element - With Jquery

Trigger event when user scroll to specific element - with jQuery

You can calculate the offset of the element and then compare that with the scroll value like:

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
       console.log('H1 on the view!');
   }
});

Check this Demo Fiddle

---

Updated Demo Fiddle no alert -- instead FadeIn() the element

---

Updated code to check if the element is inside the viewport or not. Thus this works whether you are scrolling up or down adding some rules to the if statement:

   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       //Do something
   }

Demo Fiddle

Trigger an event when scroll to specific element and then stop it with jquery

Here is the completed working code :

<style>
.div{background:#ccc;height:1200px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="Count">75</div>
<script>
$(window).scroll(startCounter);
function startCounter() {
var hT = $('.Count').offset().top,
      hH = $('.Count').outerHeight(),
      wH = $(window).height();
    if ($(window).scrollTop() > hT+hH-wH) {
        $(window).off("scroll", startCounter);
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 2000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter) + '%');
                }
            });
        });
    }
}
</script>

Trigger event after scrolling past element javascript only

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

Trigger a function when the user scrolls the element into the viewport – Vanilla JavaScript

You can follow a very helpful tip of the website Gomakethings.com.

It shows that you could use the getBoundingClientRect() method to achieve your goal:

// Get the an HTML element
var element = document.querySelector('<a selector>');

// Get its bounding client rectangle
var bounding = element.getBoundingClientRect();

Use it to build a function which checks if the element is in the viewport client by retrieving the bounding box (okay, the code could be improved, it's just a demo):

function isInViewPort(element) {
    // Get the bounding client rectangle position in the viewport
    var bounding = element.getBoundingClientRect();

    // Checking part. Here the code checks if it's *fully* visible
    // Edit this part if you just want a partial visibility
    if (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    ) {
        console.log('In the viewport! :)');
        return true;
    } else {
        console.log('Not in the viewport. :(');
        return false;
    }
}

Finally, add an event listener on scroll event which call the above function:

window.addEventListener('scroll', function (event) {
    if (isInViewport(theElementToWatch)) {
      // update the element display
    }
}, false);

According to the browser compatibility displayed by the MDN page, getBoundingClientRect() is fully supported by Chrome and Firefox (>= 3.5). The provided solution here is fully supported by the most used browsers (it's unknown for some mobile versions).

According to the one provided by Can I use... website, mobile browsers (Chrome, Firefox, etc.) fully support the method, at least from a given version.

Finally, you could keep in mind a still-experimental solution that aims to replace the use of the method getBoundingClientRect(), the Intersection Observer API (see Tom M's answer). The MDN related page explains why:

Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.

---

Related Topics