Jquery check if element is visible in viewport

Question

Function to check if the div class  media  is within the browsers visual viewport regardless of the window scroll position    lt HTML gt   lt HEAD gt     lt TITLE gt My first HTML document lt  TITLE gt   lt  HEAD gt   lt BODY gt     lt div class  main  gt      lt div class  media  gt  lt  div gt     lt  div gt    lt  BODY gt   lt  HTML gt    Trying to use this plugin https   github com customd jquery-visible with this function but I don t know how to make it work           element   visible  true

User · Answer

var visible       media   visible

User · Answer

Check if element is visible in viewport using jquery   First determine the top and bottom positions of the element  Then determine the position of the viewport s bottom  relative to the top of your page  by adding the scroll position to the viewport height   If the bottom position of the viewport is greater than the element s top position AND the top position of the viewport is less than the element s bottom position  the element is in the viewport  at least partially   In simpler terms  when any part of the element is between the top and bottom bounds of your viewport  the element is visible on your screen   Now you can write an if else statement  where the if statement only runs when the above condition is met    The code below executes what was explained above      this function runs every time you are scrolling    window  scroll function         var top of element       element   offset   top      var bottom of element       element   offset   top       element   outerHeight        var bottom of screen     window  scrollTop       window  innerHeight        var top of screen     window  scrollTop         if   bottom of screen  gt  top of element   amp  amp   top of screen  lt  bottom of element               the element is visible  do something       else              the element is not visible  do something else             This answer is a summary of what Chris Bier and Andy were discussing below  I hope it helps anyone else who comes across this question while doing research like I did  I also used an answer to the following question to formulate my answer  Show Div when scroll position

User · Answer

You can write a jQuery function like this to determine if an element is in the viewport   Include this somewhere after jQuery is included     fn isInViewport   function         var elementTop     this  offset   top      var elementBottom   elementTop     this  outerHeight         var viewportTop     window  scrollTop        var viewportBottom   viewportTop     window  height         return elementBottom  gt  viewportTop  amp  amp  elementTop  lt  viewportBottom       Sample usage     window  on  resize scroll   function         if      Something   isInViewport                 do something       else              do something else             Note that this only checks the top and bottom positions of elements  it doesn t check if an element is outside of the viewport horizontally

User · Answer

According to the documentation for that plugin   visible   returns a boolean indicating if the element is visible   So you d use it like this  if      element   visible true            The element is visible  do something   else          The element is NOT visible  do something else

User · Answer

You can see this example      Is this element visible onscreen  var visible      element  visible  detectPartial      detectPartial     True   the entire element is visible false   part of the element is visible   visible is boolean variable which indicates if the element is visible or not

[javascript] Jquery check if element is visible in viewport

Examples related to javascript

Examples related to jquery

Examples related to visible