Trigger event when user scroll to specific element - with jQuery

Question

I have an h1 that is far down a page     lt h1 id  scroll-to  gt TRIGGER EVENT WHEN SCROLLED TO  lt  h1 gt    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

User · Answer

You could use this for all devices     document  on  scroll   function         if    this  scrollTop    gt       target element   position   top            do something

User · Answer

Combining this question with the best answer from jQuery trigger action when a user scrolls past a certain 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  gt  scroll pos test              do stuff             UPDATE  I ve improved the code so that it will trigger when the element is half way up the screen rather than at the very top  It will also trigger the code if the user hits the bottom of the screen and the function hasn t fired yet   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  gt  activation point      var has reached bottom of page   max scroll height  lt   y scroll pos  amp  amp   element in view       if element in view    has reached bottom of page              Do something

User · Answer

If you are doing a lot of functionality based on scroll position  Scroll magic  http   scrollmagic io   is built entirely for this purpose    It makes it easy to trigger JS based on when the user reaches certain elements when scrolling  It also integrates with the GSAP animation engine  https   greensock com   which is great for parallax scrolling websites

User · Answer

You can use jQuery plugin with the inview event like this    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

User · Answer

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  gt   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    lt div id  talkbubble  gt  lt span class  count  gt 145 lt  span gt  lt  div gt   lt div style  clear both  gt  lt  div gt   lt div id  talkbubble  gt  lt span class  count  gt 145 lt  span gt  lt  div gt   lt div style  clear both  gt  lt  div gt   lt div id  circle  gt  lt span class  count  gt 1234 lt  span gt  lt  div gt    Check this bootply  http   www bootply com atin agarwal2 cJBywxX5Qp

User · Answer

Intersection Observer can be the best thing IMO  without any external library it does a really good job   const options                 root  null              threshold  0 25     0 - 1 this work as a trigger               rootMargin   150px                      const target   document querySelector  h1 scroll-to            const observer   new IntersectionObserver             entries   gt       each entry checks if the element is the view or not and if yes trigger the function accordingly             entries forEach      gt                    alert  you have scrolled to the h1                               options           observer observe target

User · Answer

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  gt   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  gt   hT hH-wH   amp  amp   hT  gt  wS   amp  amp   wS wH  gt  hT hH             Do something        Demo Fiddle

User · Answer

I think your best bet would be to leverage an existing library that does that very thing  http   imakewebthings com waypoints  You can add listeners to your elements that will fire off when your element hits the top of the viewport      scroll-to   waypoint function      alert  you have scrolled to the h1          For an amazing demo of it in use  http   tympanus net codrops 2013 07 16 on-scroll-header-effects

User · Answer

Inview library triggered event and works well with jquery 1 8 and higher  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

User · Answer

Just a quick modification to DaniP s answer  for anyone dealing with elements that can sometimes extend beyond the bounds of the device s viewport   Added just a slight conditional - In the case of elements that are bigger than the viewport  the element will be revealed once it s top half has completely filled 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  lt  windowHeight           Element is smaller than viewport      if  scrollOffset  gt   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 s top half has filled the viewport      if  scrollOffset  gt  elementOffset             The top of the viewport has touched the top of the element  reveal the element        return true              return false

User · Answer

I use the same code doing that all the time  so added a simple jquery plugin doing it  480 bytes long  and fast  Only bound elements analyzed in runtime   https   www npmjs com package jquery-on-scrolled-to  It will be      scroll-to   onScrolledTo 0  function         alert  you have scrolled to the h1          or use 0 5 instead of 0 if need to alert when half of the h1 shown

User · Answer

Fire scroll only once after a successful scroll  The accepted answer worked for me  90   but I had to tweak it a little to actually fire only once     window  on  scroll  function                 var hT       comment-box-section   offset   top                  hH       comment-box-section   outerHeight                    wH     window  height                    wS     this  scrollTop                 if  wS  gt    hT hH-wH -500                    console log  comment box section arrived  eh                       After Stuff                   window  off  scroll                    doStuff                                    Note  By successful scroll I mean when user has scrolled to my element or in   other words when my element is in view

[javascript] Trigger event when user scroll to specific element - with jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to scroll

Examples related to scrollto