Trigger event when a user views a specific item - using jQuery

Question

I have h1, which is far below the page.

<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1> 

and I want to trigger a warning when the user scrolls to h1 or looks like a browser in it.

 $('#scroll-to').scroll(function() { alert('you have scrolled to the h1!'); }); 

how to do it?

Answer 1

You can calculate the offset element and then compare it with the scroll value, for example:

 $(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 script

---

Updated demo script without warning - instead, FadeIn () element

---

Updated code to check if an item is inside the viewport or not. Thus, this works whether you scroll up or down by adding some rules to the if statement:

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

Demo script

Answer 2

Combining this question with jQuery's best answer trigger action when the user scrolls through a simple part of the page

 var element_position = $('#scroll-to').offset().top; $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = element_position; if(y_scroll_pos > scroll_pos_test) { //do stuff } }); 

UPDATE

I improved the code so that it works when the element is halfway up the screen, and not at the very top. It also issues a code if the user lands at the bottom of the screen and the function has not yet been fired.

 var element_position = $('#scroll-to').offset().top; var screen_height = $(window).height(); var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function var activation_point = element_position - (screen_height * activation_offset); var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer //Does something when user scrolls to it OR //Does it when user has reached the bottom of the page and hasn't triggered the function yet $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var element_in_view = y_scroll_pos > activation_point; var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view; if(element_in_view || has_reached_bottom_of_page) { //Do something } }); 

Answer 3

I think it is best to use an existing library that does just that:

http://imakewebthings.com/jquery-waypoints/

You can add listeners to your elements, which will fire when your element falls to the top of the viewport:

 $('#scroll-to').waypoint(function() { alert('you have scrolled to the h1!'); }); 

To amazingly demonstrate this in use:

http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/

Answer 4

The Inview library initialized event works well with jquery 1.8 and above! https://github.com/protonet/jquery.inview

 $('div').on('inview', function (event, visible) { if (visible == true) { // element is now visible in the viewport } else { // element has gone out of viewport } }); 

Read this https://remysharp.com/2009/01/26/element-in-view-event-plugin

Answer 5

This should be what you need.

JavaScript:

 $(window).scroll(function() { var hT = $('#circle').offset().top, hH = $('#circle').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); console.log((hT - wH), wS); if (wS > (hT + hH - wH)) { $('.count').each(function() { $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 900, easing: 'swing', step: function(now) { $(this).text(Math.ceil(now)); } }); }); { $('.count').removeClass('count').addClass('counted'); }; } }); 

CSS

 #circle { width: 100px; height: 100px; background: blue; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; float:left; margin:5px; } .count, .counted { line-height: 100px; color:white; margin-left:30px; font-size:25px; } #talkbubble { width: 120px; height: 80px; background: green; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; float:left; margin:20px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 15px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 20px solid green; border-bottom: 13px solid transparent; } 

HTML:

 <div id="talkbubble"><span class="count">145</span></div> <div style="clear:both"></div> <div id="talkbubble"><span class="count">145</span></div> <div style="clear:both"></div> <div id="circle"><span class="count">1234</span></div> 

Check this box: http://www.bootply.com/atin_agarwal2/cJBywxX5Qp

Answer 6

You can use jQuery plugin with inview event as follows:

 jQuery('.your-class-here').one('inview', function (event, visible) { if (visible == true) { //Enjoy ! } }); 

Link: https://remysharp.com/2009/01/26/element-in-view-event-plugin

Answer 7

Just a quick change in DaniP's answer, for those who deal with elements that can sometimes go beyond the device’s viewing window.

Only a small conditional is added. In the case of items that are larger than the viewport, the item will be shown as soon as the top half completely fills the viewport.

 function elementInView(el) { // The vertical distance between the top of the page and the top of the element. var elementOffset = $(el).offset().top; // The height of the element, including padding and borders. var elementOuterHeight = $(el).outerHeight(); // Height of the window without margins, padding, borders. var windowHeight = $(window).height(); // The vertical distance between the top of the page and the top of the viewport. var scrollOffset = $(this).scrollTop(); if (elementOuterHeight < windowHeight) { // Element is smaller than viewport. if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) { // Element is completely inside viewport, reveal the element! return true; } } else { // Element is larger than the viewport, handle visibility differently. // Consider it visible as soon as it top half has filled the viewport. if (scrollOffset > elementOffset) { // The top of the viewport has touched the top of the element, reveal the element! return true; } } return false; } 

Answer 8

If you perform a lot of functionality based on the scroll position, Scroll magic ( http://scrollmagic.io/ ) is built entirely for this purpose.

This makes it easy to start JS based on when the user reaches certain items when scrolling. It also integrates with the GSAP animation engine ( https://greensock.com/ ), which is great for scrolling parallax sites.

Answer 9

You can use this for all devices,

 $(document).on('scroll', function() { if( $(this).scrollTop() >= $('#target_element').position().top ){ do_something(); } });