Question

我知道，关于此主题有很多问题。但到目前为止，我还没有找到解决方案。我的代码在除iOs Safari（已在iPhone 6s，7-iOS 12.1.1上测试过）之外的所有浏览器/系统中运行。

我在网站空间上上传了一个版本：http://www.maximilian-neuse.de/viewport/

当红色区域进入视口时，蓝色区域应变为绿色。如前所述，除了在iOs Safari上，在所有系统（Windows，Mac）上均可完美运行。

相差195像素（浅红色区域显示开关的点）。

这是我的代码：

HTML

<div class="blue"></div>
<div class="red"></div>

CSS

body { margin: 0; padding: 0; height: 100%; }
div { height: 100vh; }
.blue { background: blue; }
.red { background: red; position: relative; }
.red::before { content:''; top: 0; width: 100%; height: 195px; background-color: rgba(255,255,255,0.5); position: absolute; }
.green { background: green; }

JS

$.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() {
  $('.red').each(function() {
    if ($(this).isInViewport()) {
      $( ".blue" ).addClass( "green" );
    } else {
      $( ".blue" ).removeClass( "green" );
    }
  });
});

这是小提琴：https://jsfiddle.net/b9dLh8pz/

检测元素是否在视口iO中

0 个答案: