3. 总结
本文结合sticky组件，提供了2种导航效果实现，兼容IE9+，firefox以及chrome，感兴趣可以下载源码再去详细了解。在实现tab导航的时候，因为有bs的tab组件所以实现起来非常容易，也没有必要把sticky跟tab组件再封装起来形成一个新组件，毕竟效果的实现代码已经比较简单了。在实现滚动导航的时候，因为没有用tab组件，所以滚动导航的那两个需求点都是单独实现的，在实际情况中，这两个功能可以封装成2个独立的组件或者1个组件，这样就能把实现代码写的像tab导航那样简单，不过本文没有再深入去介绍这两个组件的写法，因为这不是本文主要想介绍的内容，虽然我很想这么做，后续肯定会再写博客来介绍这两个组件，简单的东西不造一下轮子，简直是浪费机会。在实现这两个效果的时候，也有2点收获：
1）firefox以及IE，先让网页，然后再刷新，虽然网页还会显示在刷新的位置，但是不会触发scroll事件，所以今后做scroll相关的组件，一定在组件初始化的时候主动掉一次scroll相关的回调；
2）getBoundingClientRect返回的rect对象相关的值，在IE和firefox下，都可能是小数，比如60.2222299999，这样的数，在进行判断的时候可能会跟预期情况不符，导致一些意外的BUG，如果不是特别严谨的话，可以用Math.floor对这些值进行取整，然后再用来计算或者判断。比如滚动导航实现中，rect.top的值60.2222299999，offsetTop的值是60，期望是curRect.top <= offsetTop这个条件能够成立，因为小数的原因，所以它不成立。
您可能感兴趣的文章: