写代码太繁琐，原理是这样，你自己试试。
另外，避免出现元素固定定位时，因为突然固定，不占高度导致的页面会跳动一下的问题。可以在固定定位的同时，给后边的元素加上等同于固定定位元素高度的margin-top或者padding-top
另外。再多说一句。个人感觉。网站特效，就是用js控制css，从而得到一些单纯用css写不能实现的效果。所以，遇到类似的效果，可以自己尝试想一下思路，把思路写出来，然后再根据思路，找到自己需要了解的知识点，然后慢慢的效果就出来了
当要把JavaScript代码插入HTML页面里面，需要使用 <script>标签（同时使用 type 属性来定义脚本语言）。这样，<script type="text/javascript">和 </script>就可以告诉浏览器 JavaScript 从何处开始，到何处结束。
<html><body><script type="text/javascript">xxxx</script></body></html>
例如：xxxx字段是JavaScript代码效果执行，用来向页面写入输出。
把xxxx命令输入到 <script type="text/javascript">与</script>之间后，浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 "wwww"。
<html><body><script type="text/javascript">document.write("wwww")</script></body></html>
最后的结果就会在页面上显示“wwww”效果，从而实现JS特效在页面上的插入。
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
扩展资料：
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。
