Day24 - Sticky Nav
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
第24天的训练是做一个下滑到导航栏,使之固定的样式。这个样式在日常生活中是很常见的效果,为了当用户在内容不断下滑后能够较快速的跳转到自己所需的其他内容,网站一般会加上这个效果,方便用户更快的进行页面导航。
HTML源码
1 |
|
CSS源码
1 | html { |
JS源码
1 | <script> |
下面的代码通过document.body.classList.add('fixed-nav');
显示logo,通过document.body.classList.remove('fixed-nav');
隐藏logo。
1 | li.logo { |