滾動到它時顯示div

Question

我對航點有些熟悉，並嘗試將其設置為可用於以下目的。

我試圖讓#bundler-offer在用戶單擊選項2的單選按鈕后顯示。藍色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> 

Answer 1

路徑點調試文檔中對此進行了介紹，並在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，則應獲得所需的行為。

編輯：

雖然不夠優雅，但我認為此代碼段必不可少，可以將航點文件應用於您的問題。 對於您的用例來說，它可能不是一個完美的解決方案，但是可以肯定地回應您在下面的評論。

小提琴

簡而言之，這是更改的內容：

1. 該代碼使用“ opacity”代替“顯示/隱藏”
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>