html+css+js:简单制作米游社原神观测枢·攻略专栏

忙忙碌碌了五六天总算是整出来了这个项目，老规矩先给大家看看我的效果图。

目录

效果图：

一、背景的固定

二、分页器（小点）形状的改变

三、运用js监听滑轮使导航背景色发生改变

四、js书写点击回到顶部有缓慢动画效果

---

效果图：

 由于整个过程比较庞大，我就调几个重点来和大家讲一讲吧。

一、背景的固定

大家可以看见在我的移动滑轮时，背景图并没有改变，一直都是内容的改变，这一点其实很简单，也就是给插入背景图的容器一个固定定位（fixed）就行。

二、分页器（小点）形状的改变

由于我们一开始学习前端没多长时间，对于js和后面的知识并不了解多少，所以很多时候轮播图我们都是借助插件来制作的，那么可能就会有人疑惑如何改变分页器的形状呢，毕竟有的时候直接引入插件和想要达到的效果并不一样。

其实方法也很简单，在我们打开检查的时候就会发现有个类名为.swiper-pagination-bullet-active的部分一直都在改变，他就是我们要找的分页器，直接在css中选中类名进行改变即可。

.swiper-pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: #b1968b;
  border-radius: 5px;
}