使用Waypoint的Sticky Nav調整大小問題

Question

我正在為我的班級項目開發網站，並且正在使用航點來實現粘性導航。 頁面加載時的導航位於ViewPort的底部，一旦航點檢測到導航欄已擊中視口的頂部，您便向上滾動，它會應用一類“導航粘滯”，當再次向上滾動導航時會檢測到並將其放回正確的位置。

我的問題發生在調整窗口大小時，我知道出了什么問題，即使它盯着我看，我也無法找出解決方案。 如果您向下滾動頁面，並且導航已“卡住”到視口的頂部，那么您將調整窗口航點功能的大小，再次運行，並且由於導航卡在視口的頂部，因此觸發點擊並將其放回它的原始位置。

在這里可以看到問題，向下滾動以使英雄圖像不可見並無法調整窗口大小。 http://www.digitaldripmedia.com/web_campaign_project

這是CSS

.nav-global-bar {
position: absolute;
background-color: $dark-gray;
height: 4.25em;
width: 100%;
top: 0;
}
.nav-is-sticky {
position: fixed;
top: 0;
}

這是jQuery

    var windowH = $(window).height();
     var navH = $('nav').height();





function navPos() {
   windowH = $(window).height();
   navH = $('nav').height();
    var nav = $('nav');

   if (!nav.hasClass('nav-is-sticky')) {
      // positions nav bar at bottom of viewport
     nav.css({
       top: windowH - navH
     });
   }

   nav.waypoint(function(direction) {
     if (direction == 'down') {
       // if nav bar hits top of viewport apply nav is stick class
       nav.addClass('nav-is-sticky');
       $('.nav-is-sticky').css({
         top: 0
       });
     } else if (direction == 'up') {
       //remove nav is sticky class when scrolling back up and put back to original spot
       nav.removeClass('nav-is-sticky');
       if (!nav.hasClass('nav-is-sticky')) {
         nav.css({
           top: windowH - navH
         });
       }
     }
   });
 }

 navPos();

 $(window).resize(function() {
  if(!$('nav').hasClass('nav-is-sticky')) {
  navPos();
}
 });

非常感謝任何幫助以及以更好的清潔方式完成此任務的任何方式，我還是jquery新手，謝謝！

Answer 1

試圖將航路點固定到移動物體上幾乎肯定會給您帶來不希望的結果-您可以通過在main元素而不是在導航.waypoint()上調用.waypoint()函數來獲得想要的效果。 這樣可以確保僅當您實際上處於頁面上的滾動級別時才觸發航點。

同樣，您正在navPos中調用waypoint（）函數，但是不需要像這樣一遍又一遍地重新初始化它； 只需將初始.waypoint（）調用移到外部，並使其在頁面加載時發生。

編輯：我對此進行了更多測試，而最初的解決方案可能實際上並不是您想要的效果； 如果不是，請查看航路點粘性定位快捷方式 ； 可能會給您您所需要的。