滚动到它时显示 div

Question

我对 waypoints 有点熟悉，并尝试将其设置为适用于以下内容。

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

我需要做什么才能让 waypoints 在 #review-main 出现时显示？

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 and also addressed elsewhere on SO 中有介绍。

这是waypoints的解释：

[...] When Waypoints is calculating the trigger point, it doesn't have a way to find the would-be-if-not-display-none position. The resulting calculation ends up incorrect, often with sporadic values.

You should never use a display:none element as a waypoint. This includes elements that gain display:none at any time in the lifetime of your page, as trigger points are recalculated whenever a refresh occurs, such as a window resize event.

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

如果您使用不透明度来隐藏元素，而不是 display:none，waypoints 应该能够找到元素：

示例来自 waypoints

$('.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，您应该会得到您正在寻找的行为。

编辑：

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

fiddle

以下是更改的简要说明：

此代码使用 "opacity"
通过jQuery添加（并删除）路径点触发元素，否则零不透明度元素仍占据space并触发路径点。同样的事情可以通过binding/unbinding航路点
一些 css/html 需要清理 - 如果可以避免，请尽量不要使用多个相同元素 ID 的实例（如果完全是您自己的，则永远不会遇到此问题 html .)
在您的收音机输入上使用了 "name" 字段，因此一次只能选择一个。

以及，后代代码：

$("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>

滚动到它时显示 div

Showing a div when scrolling to it

javascript

jquery

scroll

jquery-waypoints