基于sticky组件，实现带sticky效果的tab导航和滚动导航(1/2)

本篇文章主要介绍了"基于sticky组件，实现带sticky效果的tab导航和滚动导航"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 上文提供了一个改进版的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的事件回调里做滚动控制处理，所以这个效果实现起来比较容易：

<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>

html结构：