位置: 编程技术 - 正文
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法(stick function)
编辑：rootadmin推荐整理分享使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法(stick function)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:stick function,stick with default settings,sticky memo widget,stick buttons,stick an item,stick应用,sticky模块,stick buttons,内容如对您有帮助，希望把文章链接给更多的朋友！
sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底部，方便用户快速进行这类元素提供的操作。
在这篇文章Sticky组件的改进实现提供了一个改进版的sticky组件，并将演示效果应用到了自己的博客。有了类似sticky的这种简单组件，我们就可以在利用它开发更丰富的效果，比如本文要介绍的tab导航和滚动导航。实现简单，演示效果如下：
tab导航（对应tab-sticky.html）：
滚动导航（对应nav-scroll-sticky.html）：
1. tab导航的实现
tab导航的需求是：在点击导航项的时候，除了切换tab内容，还要控制滚动，将要显示的tab内容置顶，并且要刚好显示在sticky元素的下边。由于demo是用bootstrap做的，bootstrap提供的tab组件非常简单好用，我们可以在tab组件提供的shown.bs.tab的事件回调里做滚动控制处理，所以这个效果实现起来比较容易：
html结构：
2. 滚动导航实现
滚动导航相对麻烦一些，tab组件里面，只会显示与当前激活的tab项对应的tab内容，而滚动导航里面，要导航的所有内容都是已经在页面中渲染完毕的，它的需求是：
1）点击导航项的时候，控制页面滚动，自动将与点击的导航项对应的内容置顶显示，并且要刚好显示在sticky元素的下边；
2）页面滚动的时候，根据当前显示的导航内容自动给相应的导航项添加active样式。
尽管听起来复杂，但是demo中的实现还是比较容易：
html结构：
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下，都可能是小数，比如.，这样的数，在进行判断的时候可能会跟预期情况不符，导致一些意外的BUG，如果不是特别严谨的话，可以用Math.floor对这些值进行取整，然后再用来计算或者判断。比如滚动导航实现中，rect.top的值.，offsetTop的值是，期望是curRect.top <= offsetTop这个条件能够成立，因为小数的原因，所以它不成立。
浅谈Sticky组件的改进实现 在上一篇文章使用getBoundingClientRect方法实现简洁的sticky组件的方法介绍了一个sticky组件的简洁实现，经过这两天的思考，发现上次提供的实现还有较多
使用getBoundingClientRect方法实现简洁的sticky组件的方法 sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底部，方便用户快速进行这类
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号 1C,C++,Java,PHP都能容忍末尾的逗号C，C++，Java中对数组赋值时，最后一个元素末尾的逗号可有可无。下面两行代码对这些语言来说是等效的。inta[]={1,2,3};/*
标签: stick function
本文链接地址:https://www.jiuchutong.com/biancheng/377447.html 转载请保留说明！
](https://www.jiuchutong.com/image/20240129/1706501265.jpg)
