javascript - 滚动到 div 时显示它

Question

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

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

我需要做什么才能仅在 #review-main 处于 View 中时显示航路点？

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 .

以下是航路点的解释:

[...] 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，路径点应该能够找到该元素:

航点示例

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

简而言之，以下是更改内容:

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

并且，为后代编写代码:

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