使用香草JavaScript创建一个智能的Navbar-css教程-PHP中文网

使用香草JavaScript创建一个智能的Navbar

粘性或固定的导航是一种流行的设计选择，因为它使用户可以持续访问该网站。另一方面，它会占用页面上的空间，有时涵盖内容是一种不吸引人的方式。

可能的解决方案？智能导航。

让我们将“智能导航”定义为：

在页面顶部可见
当用户向上移动页面时可见（无论他们滚动到哪里）
当用户向下移动页面时隐藏

这是一个可能起作用的示例：

这是粘性定位的所有便利性，并具有增加全屏好处。这种智能导航通常已经很常见了（在许多移动浏览器中考虑URL栏），但有时在没有库或插件的情况下进行了麻烦。因此，在本文中，我们将讨论如何使用CSS和Vanilla JavaScript构建一个。

旁注：人们对向下滚动页面的含义有不同的定义（想象一下某些触控板偏好在您的手指向下移动时如何向上滚动页面）。为了本文，向下滚动是指向页面底部移动。

让我们看一下代码

这是一些示例html。我们的智能导航将是位于上方的：

 
  <div>
    标识
  </div>
  <div>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">链接1 </a>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">链接2 </a>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">链接3 </a>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">链接4 </a>
  </div>

<ain>
  
</ain>

登录后复制

重要的是要注意，元素仅相对于其父容器而粘。的父容器应为身体标签；它不应将其放置在页面上的另一个标签中。

我们的智能导航的CSS看起来像这样：

 nav {
  位置：粘性；
  顶部：0;
  显示：Flex;
  弹性包：包裹；
  正当：中间的空间；
  填充：1.5REM 2REM；
  背景色：#EAEAEA;
}

登录后复制

现在，我们需要检测用户何时滚动页面及其滚动的方向。如果用户上次滚动位置的值小于其当前滚动位置的值，则用户正在向下滚动。打破逻辑，我们需要：

定义一个可存储先前滚动位置的变量
分配一个变量以检测当前滚动位置设置为页面的滚动偏移

如果当前的滚动位置大于以前的滚动位置，则用户向下滚动。让我们调用我们的功能ISSCrollingDown：

让上crollPosition = 0;

const issCrollingDown =（）=> {
  令CurrentsCrolledPosition = Window.scrolly || window.pageyOffset;
  让滚动下降；

  if（currentscrolledposition> tedestscrollPosition）{
    滚动= true;
  } 别的 {
    滚动下= false;
  }
  前旋转= CurrentsCrolledPosition;
  返回滚动;
};

登录后复制

这是该功能如何工作的视觉表示：

使用此逻辑，我们可以检测到页面向下滚动何时向下滚动，因此我们可以使用它来切换我们的NAV样式：

 const nav = document.queryselector（'nav'）;

const handlenavscroll =（）=> {
  if（issCrollingDown（））{
    nav.classlist.add（'滚动'）;
    nav.classlist.remove（'滚动'）
  } 别的 {
    nav.classlist.add（'滚动'）;
    nav.classlist.remove（'滚动'）
  }
}

登录后复制

如果用户向下滚动，我们将分配一个.scroll-down类，其中包含我们何时向下移动的样式方法。我们可以将我们的 CSS更新到此：

 nav {
  / *默认样式 */
  过渡：前500毫秒易于进出；
}

nav.scroll-up {
  顶部：0;
}

nav.scroll-down {
  顶部：-100％；
}

登录后复制

通过这种样式，的最高属性值设置为页面高度的-100％，因此它滑出了视图。我们还可以选择通过翻译或褪色来处理我们的样式 - 无论动画最有效。

表现

每当我们与滚动活动听众一起工作时，性能就应该立即想到。现在，我们每次用户滚动页面滚动时都会调用我们的功能，但是我们不需要检测每个像素运动。

对于这种情况，我们可以实现节气门功能。节气门函数是一个高阶函数，可作为传递到其函数的计时器。如果我们以250ms的计时器进行滚动事件，则在用户滚动时，该事件只会每250ms调用一次。这是限制我们调用该功能并帮助页面性能的次数的好方法。

大卫·科巴乔（David Corbacho）在本文中更深入地研究了油门实现。

JavaScript中的一个简单的油门实现如下：

 //初始化油门线变量
var Throttlewait;

const throttle =（回调，时间）=> {
  //如果变量为真，请勿运行该功能
  if（油门华）返回；

  //将等待变量设置为真实暂停功能
  ThrottleWait = true;

  //使用settimeout在指定的时间内运行该功能
  settimeout（（）=> {
    打回来（）;

    //一旦计时器开始重新启动节气门函数，将节流WAIT设置为false
    ThrottleWait = false;
  }， 时间）;
}

登录后复制

然后，我们可以在油门内包含我们的HandlenavsCroll功能：

 window.addeventlistener（“ scroll”，（）=> {
  油门（HandlenavsCroll，250）
}）;

登录后复制

通过此实现，HandlenavsCroll功能仅调用一次每250ms一次。

可访问性

每当在JavaScript中实现自定义功能时，我们都必须始终关注可访问性。这样的问题是确保当焦点焦点时可见。浏览器倾向于滚动到默认情况下目前具有焦点的页面部分，但是在处理滚动事件时可能会有某些复杂性。

确保始终可见的一种方法是更新CSS以解释重点。现在我们的CSS看起来像这样：

 nav.scroll-up，
NAV：焦点 -  {
  顶部：0;
}

登录后复制

不幸的是，在所有浏览器中都没有完全支持焦点选择器。我们可以为此提供JavaScript后备：

 const handlenavscroll =（）=> {
  if（issCrollingDown（）&&！nav.contains（document.activeElement））{
    nav.classlist.add（'滚动'）;
    nav.classlist.remove（'滚动'）
  } 别的 {
    nav.classlist.add（'滚动'）;
    nav.classlist.remove（'滚动'）
  }
}

登录后复制

在此更新的功能中，我们仅在用户向下滚动页面滚动并且当前没有任何焦点的元素时应用滚动类。

可访问性的另一个方面是考虑到某些用户可能不想在页面上使用任何动画。这是我们可以通过偏爱的动作CSS媒体查询来检测和尊重的。我们可以在JavaScript中更新此方法，并防止我们的功能完全运行，如果用户更喜欢减少运动：

 const MediaQuery = window.matchmedia（“（预先还原的动作：降低）”）;

window.addeventlistener（“ scroll”，（）=> {
  如果（MediaQuery &&！MediaQuery.Matches）{
    油门（HandlenavsCroll，250）
  }
}）;

登录后复制