JQuery浮动对象插件

Posted 2021-03-24 qq812256

 写了个插件，用来固定表的头部和尾部。

/*!
 * smartFloat v1.0.1
 * Copyright 2019- Richard
 * Licensed under MIT
 */
$.fn.extend({
    smartFloat: function (_newpos = {
        top: 0
    }, _stopElement = undefined) {
        function position(element) {
            var csstop = element.offset().top;
            var csspos = element.css("position");
            var csswidth = element.width();
            $(window).scroll(function () {
                var scroll = $(this).scrollTop(); //滚动条所在位置
                if ((scroll > csstop //如果滚动到页面超出了当前元素element的相对页面顶部的高度
                        ||
                        $(this).height() < csstop) //如果元素超过窗口高度
                ) {
                    element.css({
                        position: "fixed",
                        ‘z-index‘: 999,
                        width: csswidth
                    }).css(_newpos);

                    //如果碰到了停止浮动的元素
                    if (_stopElement) {
                        _stopElement = $(_stopElement)
                        var secsstop = _stopElement.offset().top;
                        try {
                            if (secsstop >= scroll && secsstop < (scroll + $(window).height())) { //元素在可视区域
                                restoreCss();
                            }
                        } catch (error) {
                            console.log(error);
                        }
                    }

                    //调整表头每个th的宽度，使其和td宽度一致
                    if (element.parent()[0].tagName.toLowerCase() == ‘table‘ && !element.data(‘widthIsSeted‘)) {
                        var arrChildWidth = Array();
                        element.next().find(‘tr‘).eq(0).children().each(function (i) {
                            arrChildWidth[i] = $(this).width(); //保存数据行每个td的宽度
                        });
                        element.find(‘th‘).each(function (i, th) {
                            $(th).width(arrChildWidth[i]); //设置每个th的宽度和td一致
                        });
                        console.log(‘调整表头每个th的宽度‘);
                        element.data(‘widthIsSeted‘, true);
                    }
                } else {
                    restoreCss();
                }
            });

            function restoreCss() {
                element.css(‘position‘, csspos);
            }
        };
        return $(this).each(function () {
            position($(this));
        });
    }
});

调用方式：

    $(".card-close").smartFloat({
        ‘top‘: ‘10px‘,
        ‘right‘: ‘50px‘,
        ‘z-index‘: 999
    });

    $("thead").smartFloat({
        ‘top‘: 0,
        ‘z-index‘: 990
    }); //浮动表头


    $("#tablefooter").smartFloat({
        bottom: 0
    }, "footer"); //浮动功能区，footer可见时取消浮动