Question

当我注释掉'$（“。div”）。css（'visibility'，'initial'）;然后div保持隐藏状态，并且不会显示在屏幕上。但是，如果将它包含在'if（isInView）'中，则无论是否满足if条件，都会显示div，即它始终显示。我已经在if语句中添加了一个控制台日志，它可以正常工作 - 只在div处于视图中时打印。任何人都有任何想法，为什么这不适用于div css变化？

StringBuilder IDBuffer = new StringBuilder((int)buffer);
Bar.CM_Get_Device_ID(SPDID.DevInst, IDBuffer, (int)buffer);

Console.WriteLine("InstanceID: {0}", IDBuffer.ToString());
Console.WriteLine("DevicePath: {0}\n", NDIDD.DevicePath);

Answer 1

像这样定义新的Jquery函数，以确定元素是否在视口中。

在包含Jquery之后添加：

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

用法：

    $(window).on('resize scroll', function() {
     if ($('#Something').isInViewport()) {
         //IN - Some code...
     } else {
         //OUT - Some code...
     }
});

摘要显示：

$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();

var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();

return elementBottom > viewportTop && elementTop < viewportBottom;
};

    $(window).on('resize scroll', function() {
    
     if ($('.check1').isInViewport()) {
     
         //IN
         $('.check1')
         .delay(800)
         .queue(function (next) { 
         $(this).css('background', '#BADA55');
         next(); 
         });
         
         
     } else {
     
         //OUT
         $('.check1').css('background', 'black');
         
     }
     
     if ($('.check2').isInViewport()) {
     
         //IN
         $('.check2')
         .delay(800)
         .queue(function (next) { 
         $(this).css('background', '#BADA55');
         next(); 
         });
         
     } else {
     
         //OUT
         $('.check2').css('background', 'black');
  
     }
     
});

div{
  height:100vh;
  background:grey;
  border-bottom:1px solid white;
}

ul{
position:fixed;

}

  li{
    color:white;
     font-family:sans-serif;
  }

div span{
  color:white;
  font-size:106px;
  font-family:sans-serif;
  font-weight:bold;
  display:block;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="check1"><span>1</span></div>
<div class="check2"><span>2</span></div>

isInView无法正常工作

1 个答案: