导航栏吸顶简单代码的教程记录

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

sticky : 粘性定位 是相对最简单的导航定位方式，最终没有使用主要是因为兼容性问题。且看下面的兼容性，用起来是很舒服，几个CSS写出吸顶效果，但是兼容性不是很好。IE失效， Chrome在以前是放弃这个属性的，后来又支持了。

 /* 粘性定位 ( IE 浏览器不生效 ) */
 position: sticky; // 粘性定位
top: 0; // 粘性定位

代码如下：

<script>
// 鼠标滑过添加此css样式
$(".topArea").hover(function(){
 $(this).addClass("topArea01");
         })
  $(window).scroll(function() {
  // 滚动条的垂直偏移大于190添加此CSS样式
  if($(window).scrollTop() > 190) {
     $('.topArea').addClass("topArea01");
     } else {
    $('.topArea').removeClass("topArea01");
    }
  });
</script>

留意需要先引用jQuery文件，其他效果思路类似，遇到以后再更新。

👋 感谢您的观看！