jQuery: How can I trigger an event when a div comes into view?

This question already has an answer here:

  • Check if element is visible after scrolling 38 answers

  • I think you will have to hook into the scroll event and manually check. Here is a similar question:

    Check if element is visible after scrolling

    Hope that helps.

    Bob


    The waypoints plugin covers this and more. http://imakewebthings.com/jquery-waypoints/

    Docs: http://imakewebthings.com/jquery-waypoints/#docs

    eg:

    $('.someSelector').waypoint(function(direction){
    //do stuff 
    },{
     //bottom-in-view will ensure event is thrown when the element's bottom crosses
     //bottom of viewport.
     offset: 'bottom-in-view'
    });
    

    If you only need to fire once:

    $(window).scroll(function(){
      // This is then function used to detect if the element is scrolled into view
      function elementScrolled(elem)
      {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
      }
    
      // This is where we use the function to detect if ".box2" is scrolled into view, and when it is add the class ".animated" to the <p> child element
      if(elementScrolled('. box2')) {
    
    
      // Your function here
    
      }
    });
    

    Full answer: https://www.thewebtaylor.com/articles/how-to-detect-if-an-element-is-scrolled-into-view-using-jquery

    链接地址: http://www.djcxy.com/p/83334.html

    上一篇: 如何判断是否有东西滚动到视图中?

    下一篇: jQuery:如何在div进入视图时触发事件?