当达到另一个div的50%高度时，Jquery显示div

当达到另一个div的50%高度时，可以使用jQuery来显示一个div。以下是一个实现该功能的示例代码：

HTML代码：

<div id="div1"></div>
<div id="div2"></div>

CSS代码：

#div1 {
  height: 200px;
  background-color: red;
}

#div2 {
  height: 400px;
  background-color: blue;
  display: none;
}

jQuery代码：

$(window).scroll(function() {
  var div1Height = $('#div1').height();
  var div2Offset = $('#div2').offset().top;
  var windowHeight = $(window).height();
  var scrollHeight = $(window).scrollTop();

  if (scrollHeight > (div2Offset - (windowHeight / 2))) {
    $('#div2').fadeIn();
  } else {
    $('#div2').fadeOut();
  }
});

上述代码中，我们首先定义了两个div，分别是div1和div2。div1的高度为200px，div2的高度为400px，并且初始时设置为隐藏状态（display: none）。

然后，我们使用jQuery的scroll事件监听窗口滚动事件。在滚动事件的回调函数中，我们获取div1的高度、div2距离文档顶部的偏移量、窗口的高度以及滚动的高度。

通过判断滚动的高度是否超过了div2顶部距离文档顶部的一半加上窗口高度的一半，来决定是否显示div2。当滚动高度超过该阈值时，我们使用fadeIn()方法来显示div2；否则，使用fadeOut()方法隐藏div2。

这样，当滚动到div1的50%高度时，div2就会显示出来。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器，适用于各种规模的应用程序和工作负载。了解更多信息，请访问腾讯云云服务器。
• 腾讯云对象存储（COS）：提供安全、可靠、低成本的对象存储服务，适用于存储和处理大规模的非结构化数据。了解更多信息，请访问腾讯云对象存储。