Javascript实现吸顶特效（代码示例）

本篇文章给大家带来的内容是javascript实现吸顶特效（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

知识点

1.scroll家族和offset家族的结合运用

2.当nav的offsetTop大于屏幕卷去高度的时候，进行吸顶

立即学习“Java免费学习笔记（深入）”；

3.添加一个固定类，如果满足条件，为nav加类名

运行效果

滚动页面时，保证导航栏吸顶

代码：

    
  
  
   
 <ｓｃｒｉｐｔ src="../../MyTools/MyTools.js"> <ｓｃｒｉｐｔ> window.addEventListener('load',function (ev) { // 1. 求出头部高度 var navTopHeight = myTool.$('nav').offsetTop; // 2. 监听页面滚动 window.addEventListener('scroll',function (ev1) { var scrollTopHeight = myTool.scroll().top; // 2.1 判断 if(scrollTopHeight >= navTopHeight){ myTool.addClassName(myTool.$('nav'),'nav') }else{ myTool.removeClassName(myTool.$('nav'),'nav'); } }) }) 

更多炫酷javascript特效代码，尽在：js特效大全