Question

我正在为我的班级项目开发一个站点，我正在使用航点来实现粘性导航。页面加载时的导航位于ViewPort的底部，并且一旦路标点检测到导航栏已经到达视口的顶部，它就会向上滚动它会应用一类＆＃34; nav-is-sticky＆＃34;当向后滚动时，航点会再次检测并将其放回正确的位置。

我的问题发生在窗口调整大小我知道什么是错的我只是想出一个解决方案，即使它正盯着我的脸。如果您向下滚动页面并导航已经卡住了＃34;在视口的顶部，然后你再次调整窗口的路标点功能再次运行，因为导航卡在视口的顶部，它会触发命中并将其重新放回原位。

在这里可以看到

问题，向下滚动以便英雄图像不在视野范围内并调整窗口大小。 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;可能会给你你需要的东西。

使用Waypoint的Sticky Nav调整问题大小

1 个答案: