Fullpage.js - 改变锚点颜色

简介

Fullpage.js 是一个流行的全屏滚动插件，它能够帮助我们创建具有动画效果的多页面网站，非常适合个人简历、公司展示等场景。

默认情况下，Fullpage.js 会在页面上创建锚点，并用它们来实现页面滚动。你可以使用 CSS 来自定义锚点的样式，比如改变颜色，这样可以提高用户体验，帮助用户更好地了解当前页面。

本文将介绍如何使用 CSS 在 Fullpage.js 中改变锚点的颜色。

实现步骤

以下是改变 Fullpage.js 锚点颜色的步骤：

1. 查找内置的样式

Fullpage.js 自带了样式文件，其中包括了一些默认样式。在使用 Fullpage.js 时，我们不需要再自己编写样式，而是可以直接使用内置的样式。

打开 Fullpage.js 的 GitHub 页面，找到 fullPage.css 文件。在这个文件中搜索 .fp-slidesNav 类，你会发现它是用来描述锚点的样式的：

.fp-slidesNav {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 0;
  left: 17px;
  right: 17px;
  bottom: 17px;
  text-align: center; }

2. 添加新样式

在 Fullpage.js 中使用自定义样式，有两种方式：一种通过在之前的样式表中遵循 CSS 的规则来定义样式，如果你这样做会覆盖 Fullpage.js 中的默认样式；另一种方式是在你的样式表中添加一个新的规则来覆盖 Fullpage.js 的默认样式。

我们将使用后面一种方法，打开样式表并添加以下代码块：

.fp-slidesNav .active>span {
  background-color: #F00;
}

这个代码块将修改当前所处页面的锚点的背景颜色。你可以根据需要更改背景颜色的值。

3. 注册并启用新样式

现在我们已经完成了自定义样式的创建，但是 Fullpage.js 并不知道我们添加了新样式。我们需要告诉 Fullpage.js，以便它可以注册和启用它。

打开 Fullpage.js 中的 JavaScript 文件，并在 $.fn fullpage() 调用前添加下面代码块：

afterLoad: function (anchorLink, index) {
  $(this).find('.fp-slidesNav .active span').css('background-color', '#F00');
},

这个代码块将在每个页面加载时执行，使它更改当前锚点的背景颜色，与我们在步骤 2 中定义的样式相同。

现在打开你的 HTML 文件，并尝试滚动页面，你将看到你的锚点颜色已经更新为你自己定义的颜色。

总结

Fullpage.js 非常方便、易于使用，同时还带有很多自定义选项。通过使用 CSS，你可以轻松地更改 Fullpage.js 中的样式，并为用户提供更好的浏览体验。