码迷,mamicode.com
首页 > Web开发 > 详细

JQuery浮动对象插件

时间:2019-11-27 00:55:53      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:new   under   sed   cat   top   style   bottom   头部   方式   

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

/*!
 * 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可见时取消浮动

 

JQuery浮动对象插件

标签:new   under   sed   cat   top   style   bottom   头部   方式   

原文地址:https://www.cnblogs.com/qq812256/p/11939068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!