我对航点有些熟悉，并尝试将其设置为适合以下情况。
我试图在用户点击选项2的单选按钮后显示#bundler-offer。蓝色div #bundle-offer应该淡入，但是路点在页面加载时注册 - 当你可以在控制台中看到。
我只需要在#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>
答案 0 :(得分：1)
waypoints debugging documentation涵盖了此问题，elsewhere on SO也解决了这个问题。
以下是航路点的解释：
[...]当Waypoint计算触发点时，它没有 一种找到即将到来的显示无位置的方法。所结果的 计算结果不正确，通常是零星的值。
你永远不应该使用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，您应该获得您正在寻找的行为。
修改
虽然不优雅，但我认为此代码段必不可少的方法是将航点文档应用于您的问题。对于您的用例，它可能不是完美解决方案，但肯定会回复您的评论。
简而言之，这里改变了什么：
而且，后代的代码：
$("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>