Question

我正在尝试检测我的div何时被打开是在视口之外的顶部＆amp;如果是添加一个类来调整css。

所以基本上在这个例子中，在悬停的一半div上缺少，所以应该添加将div变为绿色的类。因为代码用于检测div是否在视口之外。

但我不能让它同步。我显然在这里做错了。

更新

我刚刚注意到，如果div的顶部和底部都超出了视图端口的底部和顶部，那么它在技术上正在发挥作用。我需要它只在它从顶部出来时触发。

$(document).on("mouseenter", ":has('.infotip')", function() {
  $(this).children(".infotip").addClass("active");
});
$(document).on("mouseleave", ":has('.infotip')", function() {
  $(this).children(".infotip").removeClass("active");
});

// Infotip on screen
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() {
  var $target = $(this).children(".infotip");
  if ($target.length) {
    var $bounce = $target.offset().top + $target.height();

    if ($bounce > $(window).height()) {
        $target.addClass("test");
      } else {
        $target.addClass("top");
      }
    }

});

.infotip {
  display: none;
  height:500px;
  width:100px;
  position:absolute;
  left:50px;
  top:-250px;
}
.infotip.active {
  display: block;
}
/* goes red when past top of viewport (which it will not do in this example) */

.infotip.top {
  background-color: rgba(249, 14, 18, 1.00)
}
/* goes green if visible (which it should do when hovering) */

.infotip.test {
  background-color: rgba(35, 223, 51, 1.00)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="team-card align">
  hover me
  <div class="infotip onscreen">
    Iam infotip
  </div>
</div>

Answer 1

以下是问题，on-hover检测到div height，如果overflows，则将div更改为green。

$(document).on("mouseenter", function() {
  var $target = $(".team-card").children(".infotip");
  if ($target.length) {
    var $bounce = $target.offset().top + $target.height();

    if ($bounce > $(window).height()) {
        $target.addClass("test");
      } else {
        $target.addClass("top");
      }
    }

});

Answer 2

所以我自己想出来了。最后在我的更新中提到了高度下降之后发生了一场脑风暴。

我应该做的是计算距离顶部的距离，然后检测该距离是否小于1。 0，-5，-250等。然后踢我的声明。

只是没有以正确的方式思考这一点。

JSFiddle

＆＃13;

$(document).on("mouseenter", ":has('.infotip')", function() {
  $(this).children(".infotip").addClass("active");
});
$(document).on("mouseleave", ":has('.infotip')", function() {
  $(this).children(".infotip").removeClass("active");
});

// Infotip on screen
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() {
  var $target = $(this).children(".infotip");
  if ($target.length) {
    var scrollTop = $(window).scrollTop(),
    elementOffset = $target.offset().top,
    bounce = (elementOffset - scrollTop);

    if (bounce < 1 ) {
        $target.addClass("test");
      } else {
        $target.addClass("top");
      }
    }

});

＆＃13;

.infotip {
  display: none;
  height:500px;
  width:100px;
  position:absolute;
  left:50px;
  top:-250px;
}
.infotip.active {
  display: block;
}
/* goes red when past top of viewport (which it will not do in this example) */

.infotip.top {
  background-color: rgba(249, 14, 18, 1.00)
}
/* goes green if visible (which it should do when hovering) */

.infotip.test {
  background-color: rgba(35, 223, 51, 1.00)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="team-card align">
  hover me
  <div class="infotip onscreen">
    Iam infotip
  </div>
</div>

＆＃13;

jQuery检测div是否在垂直视图端口之外

2 个答案: