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

本篇文章主要介绍了"基于sticky组件，实现带sticky效果的tab导航和滚动导航"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 上文提供了一个改进版的sticky组件，并将演示效果应用到了自己的博客。有了类似sticky的这种简单组件，我们就可以在利用它开发更丰富的效果，比如本文要介绍的...

2. 滚动导航实现

滚动导航相对麻烦一些，tab组件里面，只会显示与当前激活的tab项对应的tab内容，而滚动导航里面，要导航的所有内容都是已经在页面中渲染完毕的，它的需求是：
1）点击导航项的时候，控制页面滚动，自动将与点击的导航项对应的内容置顶显示，并且要刚好显示在sticky元素的下边；
2）页面滚动的时候，根据当前显示的导航内容自动给相应的导航项添加active样式。
尽管听起来复杂，但是demo中的实现还是比较容易：

<script>var $sticky = $('#sticky');
    var $target = $('#target');

    new Sticky($sticky, {
        unStickyDistance: 60,
        target: $target,
        wait: 1,
        isFixedWidth: false,
        getStickyWidth: function ($elem) {
            return $elem.parent()[0].offsetWidth;
        }
    });

    var offsetTop =60;

    //实现点击tab项自动滚动到导航内容的效果    $sticky.on('click', 'a', function (e) {
        e.preventDefault();
        var $this= $(e.currentTarget);
        var $parent = $this.parent();
        if($parent.hasClass('active')) return;
        $sticky.find('li.active').removeClass('active');
        $parent.addClass('active');

        var target = $this.data('target') || $this.attr('href');
        var $target = $(target);
        window.scrollTo(0, Math.floor($target[0].getBoundingClientRect().top) + getPageScrollTop() - offsetTop);
    });

    /**
     * Math.floor是解决rect.top或rect.bottom带小数问题
     *///实现滚动时根据当前显示的导航内容自动给相应的导航项添加active样式    $(window).scroll(throttle(function(){
        var $curItem = $sticky.find('a').filter('[href='+ getCurTarget() +']');
        var $parent = $curItem.parent();
        if($parent.hasClass('active')) return;

        //最后的blur是为了去掉:active及:focus伪类的样式        $sticky.find('li.active').removeClass('active').find('a').trigger('blur');
        $parent.addClass('active');
    },1));

    //获取当前显示的导航内容元素的idfunction getCurTarget() {
        for(var targets = ['#First', '#Second', '#Third'], i =0, l = targets.length; i < l; i++) {
            var curRect = $(targets[i])[0].getBoundingClientRect();
            if(Math.floor(curRect.top) <= offsetTop && Math.floor(curRect.bottom) > offsetTop) {
                return targets[i];
            }
        }
        return targets[0];
    }

    function getPageScrollTop() {
        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    }

    //这个函数在实际工作中是应该抽出来的，否则sticky.js里面还有一份重复的function throttle(func, wait) {
        var timer =null;
        returnfunction () {
            var self =this, args = arguments;
            if (timer) clearTimeout(timer);
            timer = setTimeout(function () {
                returntypeof func ==='function'&& func.apply(self, args);
            }, wait);
        }
    }
script>

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下，都可能是小数，比如60.2222299999，这样的数，在进行判断的时候可能会跟预期情况不符，导致一些意外的BUG，如果不是特别严谨的话，可以用Math.floor对这些值进行取整，然后再用来计算或者判断。比如滚动导航实现中，rect.top的值60.2222299999，offsetTop的值是60，期望是curRect.top <= offsetTop这个条件能够成立，因为小数的原因，所以它不成立。

感谢您的阅读：）

代码下载

以上就介绍了基于sticky组件，实现带sticky效果的tab导航和滚动导航，包括了方面的内容，希望对Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_492750_2.html