滚动到它时显示一个 div

Question

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

我试图在用户单击选项 2 的单选按钮后显示 #bundler-offer。蓝色 div #bundle-offer 应该淡入，但是航点在页面加载时注册 - 正如您在控制台。

当#review-main 在视野中时，我需要做什么才能显示航点？

Jsfiddle

var package1 = $('#package1');
var package2 = $('#package2');
$('.product').on('change', function() {
  if (package1.is(':checked')) {
    console.log("Option - Package 1");
    $('#pack2-details').hide();
    $('#pack1-details').show();
  } else if (package2.is(':checked')) {
    console.log("Option - Package 2");
    $('#pack2-details').show();
    $('#pack1-details').hide();
  }
});
$('#review-main').waypoint(function() {
  // handler: function(direction) {
  $('#bundle-offer').addClass('fadeUp');
  console.log('Scrolled to waypoint!');
}, {
  offset: '100%'
});

.check {
  display: none;
}

.wrap {
  background: green;
  height: 600px;
  width: 100%;
}

#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;
  transition: all 0.5s ease;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<label>Option 1</label>
<input type="radio" class="product" id="package1">
<label>Option 2</label>
<input type="radio" class="product" id="package2">
<div id="pack1-details" class="check">
  <p>Package 1</p>
  <div class="wrap" id="pack1-details">
    Package 1 showing
  </div>
</div>
<div id="pack2-details" class="check">
  <p>Package 2</p>
  <div class="wrap" id="pack2-details">
    Package 2 showing
    <div id="review-main">
      <div id="bundle-offer">Working IF fading in</div>
    </div>
  </div>
</div>

Answer 1

waypoints debugging documentation 对此进行了介绍，并在elsewhere on SO 中注明。

以下是航点的解释：

[...] Waypoints 计算触发点时，它没有 一种找到如果不显示无显示位置的方法。所结果的 计算结果不正确，通常是零星的值。

你不应该使用 display:none 元素作为航点。这 包括获得显示的元素：在生命周期中的任何时候都没有 您的页面，因为每当刷新时都会重新计算触发点 发生，例如窗口调整大小事件。

[因此，您的航点功能在页面加载时触发]

如果你利用不透明度来隐藏元素，而不是display:none，航点应该能够定位元素：

航点示例

$('.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'
  });

如果您在代码中实现这一点并相应地更改页面加载时的 css，您应该会得到您正在寻找的行为。

编辑：

虽然不优雅，但我认为此代码 sn-p 必不可少将航点文档应用于您的问题。对于您的用例，它可能不是一个完美的解决方案，但肯定会回应您在下面的评论。

fiddle

简而言之，变化如下：

1. 此代码使用“不透明度”而不是“显示/隐藏”
2. 路点触发元素通过jQuery添加（并删除），否则零不透明度元素仍然占用空间并触发路点。同样的事情可以通过绑定/取消绑定航点来完成
3. 一些 css/html 需要清理 - 如果可以避免，尽量不要使用多个相同元素 id 的实例（如果都是你自己的 html，你应该永远不会遇到这个问题。）
4. 在无线电输入中使用了“名称”字段，因此一次只能选择一个。

还有，后人代码：

$("input[name='prod_op']").on('change', function() {
  console.log($(this).attr('id'));
  if ($(this).attr('id') === "package1" && $('#pack1-container').css('opacity', 0)) {
    console.log('selected 1');
    $('#pack1-container').css({
      'opacity': 1,
      'height': '600px'
    });
    $('#pack2-container').css({
      'opacity': 0,
      'height': '0px'
    });
    $('#pack2-details').empty();
  } else if ($(this).attr('id') === "package2" && $('#pack2-container').css('opacity', 0)) {
    console.log('selected 2');
    $('#pack2-container').css({
      'opacity': 1,
      'height': '600px'
    });
    $('#pack1-container').css({
      'opacity': 0,
      'height': '0px'
    });
    $('#pack2-details').append('Package 2 showing <div id="review-main"><div id="bundle-offer" class="hide">Working IF fading in</div></div>');
    setWaypoint();
  }
});

var setWaypoint = function(){
  var waypoint = new Waypoint({
    element: $('#review-main'),
    handler: function(direction){
      if(direction === "down"){
        console.log('waypoint... down');
        $('#bundle-offer').removeClass('hide fadeDown').addClass('fadeUp');
      } else if(direction === "up") {
        console.log('waypoint... up');
        $('#bundle-offer').removeClass('fadeUp').addClass('fadeDown');
        console.log('waypoint... down');
      }
    },
    //offset: '600px'
  });
}

.hide {
  opacity: 0;
  height: 0px;
}

.wrap {
  background: green;
  height: 600px;
  width: 100%;
  display: block;
}

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


.fadeUp {
  opacity: 1;
  transition: all 0.5s ease;
  bottom: 0;
}

.fadeDown{
  opacity: 0;
  transition: all 0.5s ease;
  bottom: 0;
}

.page_wrap{
  min-height: 1000px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page_wrap">

  <label>Option 1</label>
  <input type="radio" class="product" name="prod_op" id="package1" />
  <label>Option 2</label>
  <input type="radio" class="product" name="prod_op" id="package2" />

  <div id="pack1-container" class="hide">
    <p>Package 1</p>
    <div class="wrap" id="pack1-details">
      Package 1 showing
    </div>
  </div>

  <div id="pack2-container" class="hide">
    <p>Package 2</p>
    <div class="wrap" id="pack2-details">
    </div>
  </div>
</div>