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);
}
结论
就是这样,伙计们! 在本练习中,我们学习了如何根据滚动方向切换粘性标题的可见性。
希望本教程对您有所帮助,并在以后的项目中利用它。 与往常一样,非常感谢您的阅读!
fullpage 滚动粘性