如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

function isVisible($node){
      var winH=$(window).height()
      var scrH=$(window).scrollTop()
      var offH=$node.offset().top
      var nodeH=$node.height()
 
      if(offH<winH+scrH&&scrH<nodeH+offH){
        return true
      }else{
        return false
      }
 
    }

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    p{
      margin-top: 1300px;
      margin-bottom: 1300px;
    }  
    
  </style>
</head>
<body>
  <div><p>hello</p></div>
  
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    
      var winH=$(window).height();
      var scrH=$(window).scrollTop();
      var offH=$('p').offset().top;
      var nodeH=$('p').outerHeight();
    
    $(window).on('scroll',function(){
          // console.log($(window).scrollTop())
          // console.log(scrH)
          
        if(offH<winH+$(window).scrollTop()&&$(window).scrollTop()<nodeH+offH){
          console.log(true)
        }else{
          console.log(false)
        }
      })
  </script>
</body>
</html>

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

<head>
   <style>
    p{
      margin-top: 1000px;
      margin-bottom: 1000px;
      width: 100px;
      height: 20px;
      background: green;
    }  
  </style>
</head>
<body>
  <p>
    hello
  </p>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    var num=0
    $(window).on('scroll',function(){
      if(checkshow($('p'))){
        num++;
        if(num===1){
          console.log(true)
        }
      }else{
          console.log(false)
      }
    })
    function checkshow(){
      var winH=$(window).height();
      var scrH=$(window).scrollTop();
      var offH=$('p').offset().top;
      var nodeH=$('p').outerHeight();
       if(offH<winH+$(window).scrollTop()&&$(window).scrollTop()                
       <nodeH+offH){
          return true
        }else{
          return false
        }
    }
 </script>

</body>