Javascript 在视口中滚动到一半时显示隐藏的div

编辑希望这更清楚。：）

现在，当您向下滚动时，您会注意到粉红色的div仅在接触视口顶部时才会出现。当它在视口的中间接触时，如何使其显示

//常数
var BTN_CLS='owl thumb item'，
BTN\u动画\u毫秒=200，
DIV_ANIMATION_MILLIS=1000；
//文档准备处理程序
$（文档）.ready（函数（）{
//显示第一个“div”中的按钮
显示BTN（“一个”，BTN\U CLS）；
//窗口滚动处理程序
$（窗口）。滚动（函数（）{
$（'.hidden'）。每个（函数（i，v）{
如果（$（窗口）.scrollTop（）>$（此）.offset（）.top）{
//滚动时显示“div”
showDiv（$（此），onCompleteDivAnimation（$（此））；
}
});
});
});
/**
*用于显示动画“div”并执行某些操作。
*@param{Function}完成动画后执行的回调操作。
*@param{Object}div目标元素。
*/
函数showDiv（div，completeCallback）{
//检查“div”当前是否已设置动画，并避免设置动画队列
如果（！div.is（':animated'））{
动画师({
不透明度：1
}, {
完成：完成回调，
持续时间：DIV_ANIMATION_MILLIS
});
}
};
/**
*用于在完成“div”动画后执行操作。
*/
完成的初始化功能（div）{
showBtns（div.prop（'id'），BTN_CLS）；
};
/**
*用于显示“div”元素中的按钮。
*@param{String}divId目标元素Id。
*@param{String}btnCls按钮CSS类。
*/
函数showBtns（divId，btnCls）{
var btnGroup=getBtnGroup（divId，btnCls）；
animateBtn（btnGroup）；
};
/**
*用于从“div”元素创建一组按钮。
*@param{String}divId目标元素Id。
*@param{String}btnCls按钮CSS类。
*@returns{Array}btnGroup
*/
函数getBtnGroup（divId，btnCls）{
var domBtns=$（'#'+divId+'.+btnCls），
BTN组=[]；
对于（变量i=0；i<（domBtns | |[]）。长度；++i）{
btnGroup.push（domBtns[i]）；
}
返回BTN组；
};
/**
*用于设置通常来自“div”元素的按钮组的动画。
*/
函数animateBtn（BTN组）{
btnGroup=btnGroup | |[]；
$（btnGroup.shift（））.fadeIn（BTN_ANIMATION_MILLIS，function（））{
如果（btnGroup.length>0）{
animateBtn（btnGroup）；
}
});
};这可以通过jquery完成。这是一把小提琴：

在scroll上，获取窗口高度、用户已滚动的数量以及隐藏div的顶部位置（我设置了窗口高度一半的偏移量，以便div在视口中处于50%后才会显示）

JS

注意：确保在小提琴中向下滚动
imagePos
仅在页面加载时设置一次，并使用
此
，这是window@charlietfl所以我需要多次调用它？o、 oyes…请注意，滚动事件每秒触发多次。。。应该使用一些去抖动以获得更好的性能此处使用scrollTop是关键，特别是因为它在原始代码中丢失了。@JoshSanger您好，我更新了OP，希望更清楚。我试图将你的代码合并到我的代码中，但没有得到正确的结果。
$（窗口）.on（'scroll'，function（）{
是否替换
$（document）.ready（function（）{
）？否，$（document）.ready（）仍然需要确保首先加载DOM。on（'scroll'）上的$（窗口）函数将被放置在其中。在小提琴中使用代码的方式使其等待元素出现在屏幕顶部才能显示。如果要以50%的比例显示，则需要获取窗口高度并将其用作比较
$(window).on('scroll', function(){
  var scrollAmount = $(window).scrollTop();
  var windowHeight = $(window).height();
  var halfHeight = $(window).height() / 2;
  var topOfHiddenDiv = $('.hidden-div').offset().top;
  if(((scrollAmount + windowHeight) - halfHeight) >= topOfHiddenDiv && !$('.hidden-div').hasClass('show')) {
    $('.hidden-div').addClass('show');
  }
});

.content {
  padding-top: 1000px;
}
.hidden-div {
  background: lightblue;
  color: @white;
  padding: 30px;
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 300px;
}
.hidden-div.show {
  opacity: 1;
}