fullpage 滚动粘性_如何在滚动条上隐藏/显示粘性标题（使用JavaScript）

最新推荐文章于 2021-10-27 12:46:16 发布

daique1908

最新推荐文章于 2021-10-27 12:46:16 发布

阅读量446

点赞数

文章标签： css js html javascript java ViewUI

fullpage 滚动粘性

您是否见过那些固定的（或“粘性”）标题栏之一，当您开始向下滚动页面时该标题栏消失，然后在您开始向上滚动时又重新出现？在本练习中，我们将学习如何使用一些JavaScript来构建自己的脚本。

为什么？

粘性组件（例如标题）在网页设计领域非常流行；它们可以使基本的UI元素永久可见，并且在用户需要时可以轻松访问。但是，在某些情况下（如果标头包含很多内容，或者视口大小和方向限制了可用屏幕空间的数量），粘性标头可能会令人讨厌。

“如果实施不当，粘性导航元素可能会干扰实际内容。” – 亚伦·安德烈（ Aaron Andre）Chichioco

不需要时（即，当用户滚动查看更多内容时）从视图中消失的粘性标题是一个很好的折衷方案。

我们可以通过使用诸如Headroom.js之类的外部库来实现这种效果，但是我们将通过自己构建一些东西来学习底层机制。作为奖励，我们还将使标题菜单完全起作用，以供您添加自己的自定义设置。

我们正在建设什么

这是我们要创建的（滚动以测试行为）：

让我们开始吧！

1.从页面标记开始

要开始使用粘性标头，我们将使用包含nav的header打开标记。在其中，我们将放置菜单切换按钮和菜单本身。为了使页面具有一些虚拟内容，我们还将定义三个全屏部分。我们将在前面的教程中为它们添加一些背景图像。

这是页面标记：

<header class="page-header">
  <nav>
    <div class="trigger-menu-wrapper">
      <button class="trigger-menu">
        <svg width="20" height="20" viewBox="0 0 24 24">
          <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
        </svg>
        <span>MENU</span>
      </button>
    </div>
    <ul class="menu">...</ul>
  </nav>
</header>

<main class="page-main">
  <section>...</section>
  <section>...</section>
  <section>...</section>
</main>

2.添加粘性标题CSS

让我们添加一些CSS规则来改善标题的外观和行为（在一定程度上）。

为了简单起见，我不会逐步介绍初始的重置样式，但是可以通过单击demo项目的CSS选项卡随意查看它们。

标头样式非常简单，但是有两点很重要：

首先，切换菜单包装和菜单都将是固定位置的元素。
其次，菜单最初将被隐藏。

与标题相关的样式如下：

/*CUSTOM VARIABLES HERE*/

.trigger-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 10px;
  z-index: 2;
  background: var(--lightpurple);
  transition: transform 0.4s;
}

.page-header .trigger-menu {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: var(--white);
}

.page-header .trigger-menu svg {
  fill: var(--white);
  margin-right: 5px;
  transition: transform 0.3s;
}

.page-header .menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  text-align: center;
  padding: 15vh 0 5vh;
  overflow: auto;
  z-index: 1;
}

.page-header .menu a {
  font-size: 3rem;
}

.page-header .sub-menu a {
  font-size: 1.5rem;
}

这些部分将充当全屏元素，并带有背景图像和顶部深色覆盖。这些将使我们可以滚动过去，因此我们可以看到标题的隐藏/显示行为：

.page-main section {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
}

.page-main section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
}

3.添加JavaScript

下一步，让我们向菜单添加一些行为。

切换菜单

每次单击切换按钮时，菜单的可见性都会改变。如果它是隐藏的，它将显示。但是，如果可见，它将消失。

我们正在以一种非常基本的方式来处理此问题，但是它使您可以根据自己的喜好来调整内容。这是必需JavaScript代码：

const body = document.body;
const triggerMenu = document.querySelector(".page-header .trigger-menu");

triggerMenu.addEventListener("click", () => {
  body.classList.toggle("menu-open");
});

以及相关样式：

.page-header .trigger-menu svg {
  transition: transform 0.3s;
}

.menu-open {
  overflow: hidden;
}

.menu-open .page-header .menu {
  display: block;
}

.menu-open .page-header svg {
  transform: rotate(45deg);
}

您可能已经注意到，菜单状态更改期间没有任何动画。发生这种情况是因为我使用了非动画 display属性。如果要添加某种动画，请将该属性替换为可动画的东西，例如opacity或visibility 。

切换页眉

现在让我们把注意力转移到更有趣的事情上。

每次向下滚动时，切换按钮（通常是标题）都将消失，并带有滑出动画。如果我们随后向上滚动，它应该带有滑入动画。

为了实现此功能，我们将使用两个帮助器类： scroll-up和scroll-down 。进一步来说：

当我们向下滚动时，将为body提供scroll-down类。
当我们向上滚动时，将获得scroll-up类。
如果我们滚动到页面顶部，它将失去其scroll-up类。

为了检测滚动方向，我们将最后一个滚动位置存储在变量（ lastScroll ）中。最初，此变量的值为0。然后，滚动时，我们将检查新位置是否大于或小于旧位置。根据该条件的结果，我们将相应的类应用于body 。

这是处理此问题JavaScript代码：

const body = document.body;
const nav = document.querySelector(".page-header nav");
const menu = document.querySelector(".page-header .menu");
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll == 0) {
    body.classList.remove(scrollUp);
    return;
  }
  
  if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
    // down
    body.classList.remove(scrollUp);
    body.classList.add(scrollDown);
  } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
    // up
    body.classList.remove(scrollDown);
    body.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
});

以及相关的样式：

/*CUSTOM VARIABLES HERE*/

.trigger-menu-wrapper {
  transition: transform 0.4s;
}

.scroll-down .trigger-menu-wrapper {
  transform: translate3d(0, -100%, 0);
}

.scroll-up .trigger-menu-wrapper {
  transform: none;
}

.scroll-up:not(.menu-open) .trigger-menu-wrapper {
  background: var(--lightpurple);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}