tools：fixedTop.js pc端固定位置组件

[mishe]

pc端固定位置组件

主要用于左右2栏或3栏布局的帖子正文或列表页的展示，但一边的内容可能会很长，而另一边内容又很少，出于页面的美观，甚至是一些体现的优化，需要把其中的一部分内容在页面滚动超过一定位置时，固定的展示在一个位置上。

首先来看下js源码：

(function ($) {
    $.extend($.fn, {
        fixedTop: function (options) {
            var opt = {
                top: 0, //距离屏幕的上边距
                zIndex: 0
            }
            opt = $.extend(opt, options);
            this.each(function () {
                var self = this,
                    top = self.offsetTop,
                    seftPos = self.getBoundingClientRect(),
                    left=seftPos.left+(document.documentElement.scrollLeft || document.body.scrollLeft),
                    selfHeight = seftPos.height,
                    selfWidth = seftPos.width;
                setInterval(function () {
                    var st = document.documentElement.scrollTop || document.body.scrollTop,
                        sl=document.documentElement.scrollLeft || document.body.scrollLeft,
                        msl=$(document).width()-document.documentElement.clientWidth,
                        pos = 0,
                        height = 0;
                    if (!pos && st - top + opt.top >= 0) {
                        $(self).css({
                            'position': 'fixed',
                            'top': 0,
                            'left':sl>0?left-sl:'auto',
                            'padding-top': opt.top,
                            'width': selfWidth,
                            'z-index': opt.zIndex
                        });
                        pos = 1;
                        if (document.documentElement.clientHeight - 180 < selfHeight) {
                            height = $(document).height();
                            if (st + selfHeight + 200 > height) {
                                $(self).css({
                                    'position': 'static',
                                    'padding-top': 0
                                });
                            }
                        }
                    }
                    else if (st - top <= 0) {
                        $(self).css({
                            'position': 'static',
                            'padding-top': 0
                        });
                    }
                }, 16);

            })
        }
    });
})($ || jQuery || Zepto);

这个组件支持多块内容的固定展示，也支持，自定义的固定位置的提前量，另外这里没有绑定window.scroll 事件，而是采用了循环检测的方式，采用16ms的间隔；

使用范例

$('.fixedTop1').fixedTop({
    top: 55, //固定位置的提前量
    zIndex: 1
});

$('.fixedTop2').fixedTop({
    top: 255,
    zIndex: 0
});