粘性导航使用路径点调整大小的问题

Sticky Nav using Waypoints resize issues

本文关键字：调整 问题 路径 导航      更新时间：2023-09-26

我正在为我的班级项目开发一个网站，我正在使用路径点来实现粘性导航。在页面加载时，导航位于ViewPort的底部，一旦waypoints检测到导航条已经到达ViewPort的顶部，它就会应用一类"navis -sticky"，当滚动回滚时，waypoints再次检测并将其放回正确的位置。

我的问题发生在窗口调整大小，我知道什么是错的，我只是不能找出一个解决方案，即使它是盯着我的脸。如果你向下滚动页面，并且导航已经"卡"在视口的顶部，然后你调整窗口路径点函数再次运行，因为导航被卡在视口的顶部，它会触发命中并将其放回其原始位置。

问题可以在这里看到，向下滚动，这样英雄图像是在视图之外，并调整窗口大小。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谢谢!

试图将一个航路点固定到一个移动的对象上几乎肯定会给你带来不希望的结果——你可以通过在你的main元素上调用.waypoint()函数而不是在导航上得到你想要的效果。这将确保只有当你真正在页面上的滚动水平时，路标才会触发。

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

编辑:我测试了这个多一点，我最初的解决方案可能不是你想要的效果;如果不是，请查看路径点粘贴定位快捷方式;也许能满足你的需要
相关文章：