基于sticky组件，实现带sticky效果的tab导航和滚动导航

上文提供了一个改进版的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的事件回调里做滚动控制处理，所以这个效果实现起来比较容易：

<script>var $target = $('#target');new Sticky('#sticky', {  unStickyDistance: 60,  target: $target,  wait: 1,  isFixedWidth: false,  getStickyWidth: function($elem) {    return $elem.parent()[0].offsetWidth;  }});$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {  window.scrollTo(0, $target[0].getBoundingClientRect().top + getPageScrollTop() + 1);});function getPageScrollTop() {  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;}</script>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：基于sticky组件，实现带sticky效果的tab导航和滚动导航

关键词：