javascript - Sticky Nav 使用 Waypoints 调整大小问题

Question

我正在为我的类(class)元素开发一个网站，我正在使用航点来实现粘性导航。页面加载时的导航位于 ViewPort 的底部，一旦航点检测到导航栏已到达视口(viewport)顶部，您就会向上滚动，它会应用“nav-is-sticky”类当再次向上滚动时，航点再次检测到并将其放回正确的位置。

我的问题发生在调整窗口大小时我知道出了什么问题我只是想不出解决方案，即使它正盯着我的脸。如果您向下滚动页面并且导航已“卡住”到视口(viewport)的顶部，然后您调整窗口大小航路点功能再次运行并且由于导航卡在视口(viewport)顶部它会触发点击并将其放回它的原始位置。

问题可以在这里看到，向下滚动，使主图不在 View 中，然后调整窗口大小。 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

尝试将航路点固定到移动物体几乎肯定会给您带来意想不到的结果 - 您可以通过在 上调用 .waypoint() 函数来获得您想要的效果>main 元素而不是在导航中。这将确保仅当您实际处于页面上的滚动级别时才会触发航路点。

此外，您在 navPos 中调用 waypoint() 函数，但它不需要像那样一遍又一遍地重新初始化；只需将最初的 .waypoint() 调用移到外面，让它在页面加载时发生。

编辑:我对此进行了更多测试，但我最初的解决方案实际上可能不是您想要的效果；如果不是，请查看 waypoints sticky-positioning shortcut ;可能会给你你需要的东西。