Javascript 在视图中使div从底部过渡

在研究过程中，我发现航路点是一种检查div是否在视野中的好方法。因此，我将其与我的代码集成。我的问题是，我正在检查的div

#review main

正在注册，即使它不在视图中

正如您将在片段中看到的，我有两个收音机盒。

#review main

div位于选项2 div内。因此，当您单击选项2无线电输入时，即

#review main

实际上处于视图中

为什么航路点在视图中注册

#查看main

另外，我想做的是让

#bundle offer

从屏幕外过渡到底部。我也不认为我做得对。有人看到我用

addClass

fadeUp做了什么错事吗

#bundle-offer {
  position: fixed;
  bottom: -120px;
  left: 0;
  right: 0;
  width: 100%;
  height: 120px;
  background: blue;
  opacity: 0;
  transition: all 0.5s ease;
}

#bundle-offer.fadeUp {
  opacity: 1;
  transform: translateY(120px);
  -webkit-transform: translateY(120px);
  transition: all 0.5s ease;
  bottom: 0;
}

下面是一个片段

var package1=$（'#package1'）；
var package2=$（“#package2”）；
$（'.product'）。在（'change'，function（）上{
if（package1.is（'：checked'））{
控制台日志（“选项-包1”）；
$（“#pack2详细信息”）.hide（）；
$（“#pack1详细信息”）.show（）；
}else if（package2.is（'：checked'））{
控制台日志（“选项-包2”）；
$（“#pack2详细信息”）.show（）；
$（“#pack1详细信息”）.hide（）；
}
});
$（“#查看主要”）航路点（函数（）{
//处理程序：函数（方向）{
//警报（'您已滚动到一个条目'）；
$（“#bundle offer”）.addClass（'fadeUp'）；
console.log（'滚动到航路点！'）；
}, {
抵销：“100%”
})；

。检查{
显示：无；
}
.包裹{
背景：绿色；
高度：600px；
宽度：100%；
}
#捆绑报价{
位置：固定；
底部：-120px；
左：0；
右：0；
宽度：100%；
高度：120px；
背景：蓝色；
不透明度：0；
过渡：所有0.5s缓解；
}
#bundle-offer.fadeUp{
不透明度：1；
变换：translateY（120px）；
-webkit转换：translateY（120px）；
过渡：所有0.5s缓解；
底部：0；
}

选择1
选择2
包1

包装1显示
方案2

包装2显示