Trigger event when user scroll to specific element - with jQuery

html, javascript, jquery, scroll, scrollto

Solution

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

Problem

I have an h1 that is far down a page.. ``` <h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1> ``` and I want to trigger an alert when the user scrolls to the h1, or has it in it's browser's view. ``` $('#scroll-to').scroll(function() { alert('you have scrolled to the h1!'); }); ``` how do I do this?

Original source

Related problems