Javascript 滚动到div时显示div

我对航路点有点熟悉，并尝试将其设置为适用于以下情况

我试图在用户单击选项2的单选按钮后显示bundler offer。blue div捆绑服务应该淡入，但是航路点正在页面加载中注册-正如您在控制台中看到的那样

我必须做些什么才能在查看主要路线时只显示航路点

var package1=$'package1'； var package2=$'package2'； $'.product'。关于“更改”，函数{ 如果package1.is'：选中'{ console.logOption-包1； $'pack2-details'。隐藏； $'pack1-details'。显示； }否则，如果package2.is'：选中'{ console.logOption-包2； $'pack2-details'。显示； $'pack1-details'。隐藏； } }; $'review-main'.waypointfunction{ //处理程序：函数方向{ $'bundle-offer'.addClass'fadeUp'； console.log“滚动到航路点！”； }, { 抵销：“100%” }; .检查{ 显示：无； } .包裹{ 背景：绿色； 高度：600px； 宽度：100%； } 捆绑报价{ 位置：固定； 底部：-120px； 左：0； 右：0； 宽度：100%； 高度：120px； 背景：蓝色； 不透明度：0； 过渡：所有0.5s缓解； } bundle-offer.fadeUp{ 不透明度：1； 过渡：所有0.5s缓解； 底部：0； } 选择1 选择2 包1

包装1显示 方案2

包装2显示 淡入时工作 这在本手册中有介绍，也有介绍

以下是航路点的解释：

[…]当航路点计算触发点时，它没有 查找的方法是如果不显示none位置 计算结果不正确，通常是零散的值

您不应该使用display:none元素作为航路点 包括在生存期内任何时候都无法显示的元素 当刷新时会重新计算触发点 发生，例如窗口大小调整事件

[正因为如此，您的航路点功能在页面加载时启动]

如果使用不透明度隐藏元素，而不是显示：无，则航路点应能够定位元素：

航路点示例

如果您在代码中实现了这一点，并相应地更改了页面加载上的css，那么您应该可以获得所需的行为

编辑：

虽然不是很优雅，但我认为这段代码片段将航路点文档应用到您的问题上是必不可少的。它可能不是您用例的完美解决方案，但肯定会回应您下面的评论

简而言之，这里有一些变化：

此代码使用不透明度，而不是显示/隐藏 通过jQuery添加并删除waypoint触发器元素，否则zero opacity元素仍会占用空间并触发waypoint。绑定/解除绑定waypoint也可以完成同样的操作 一些css/html需要清理——如果可以避免，尽量不要使用同一个元素id的多个实例。如果都是您自己的html，则永远不会出现此问题。 在无线电输入上使用名称字段，以便一次只能选择一个。 以及，子孙后代的代码：

$input[name='prod_op']。在'change'上，函数{ console.log$this.attr'id'； 如果$this.attr'id'==package1&$'pack1-container'.css'opacity'，0{ console.log'selected 1'； $'pack1-container'.css{ “不透明度”：1， “高度”：“600px” }; $'pack2-container'.css{ “不透明度”：0， “高度”：“0px” }; $'pack2-details'。为空； }否则如果$this.attr'id'==package2&$'pack2-container'.css'opacity'，0{ console.log'selected 2'； $'pack2-container'.css{ “不透明度”：1， “高度”：“600px” }; $'pack1-container'.css{ “不透明度”：0， “高度”：“0px” }; $'pack2-details'。附加'pack2-details在淡入时显示工作的包2'； 设定点； } }; var设置航路点=功能{ var航路点=新航路点{ 元素：$'review-main'， 处理程序：函数方向{ ifdirection==向下{ 控制台。记录“航路点…向下”； $'bundle-offer'。删除类'hide fadeDown'。添加类'fadeUp'； }否则，如果方向===向上{ 控制台。记录“航路点…向上”； $'bundle-offer'。删除类'fadeUp'。添加类'fadeDown'； 控制台。记录“航路点…向下”； } }, //偏移量：“600px” }; } .隐藏{ 不透明度：0； 高度：0px； } .包裹{ 背景：绿色； 高度：600px； 宽度：100%； 显示：块； } 捆绑报价{ 位置：固定； 左：0； 右：0； 宽度：100%； 高度：120px； 背景：蓝色； 过渡：所有0.5s缓解； } 法德普先生{ 不透明度：1； 过渡：所有0.5s缓解； 底部：0； } 法德敦先生{ 不透明度：0； 过渡：所有0.5s缓解； 底部：0； } .换页{ 最小高度：1000px； 背景颜色：粉红色； } 选择1 选择2 包1

包装1显示 方案2

---

我使用的航路点可能与@RaxWeber重复？这究竟是怎么一个可能的复制品呢？我有一个详细的问题。@RaxWeber我刚刚试着使用你提到的问题的解决方案。问题仍然是一样的。。。当div在视图中时，蓝盒捆绑机报价不会启动。。。。。。它仍然在视图中显示了div id，而实际上它还没有显示出来。@RaxWeber-我不认为这是一个副本，也不知道你为什么会这样认为，但问题的解决方案在其他地方有介绍，所以我无法用我的格式完全弄清楚。有什么想法吗？我只想显示单选按钮，直到你点击它们。然后，如果单击选项2以选择要发射的航路点。您想同时选择两个收音机吗？选项1和选项2？还是应该是或？或或。我只想在页面加载时隐藏两者的内容。然后单击单选按钮时显示相应的选项内容，但我只希望在选项2中显示review main时触发航路点

$('.something')
  .css('opacity', 0) // immediately hide element
  .waypoint(function(direction) {
    if (direction === 'down') {
      $(this.element).animate({ opacity: 1 })
    }
    else {
      $(this.element).animate({ opacity: 0 })
    }
  }, {
    offset: 'bottom-in-view'
  });