今天给大家分享一个实用的jQuery插件。
这个插件可以将footer自动固定在页面底部，这在我们的页面不足一屏时非常有用。

jquery-fixfooter.js

/**
 * jQuery插件：使footer自动固定在底部(页面不足全屏时)
 * @author luoluolzb
 * @time   2018/5/26
 */
(function(){
    //给head添加一个style(固定样式)
    $(document.head).append($('<style>.jquery-fixfooter{position: fixed;bottom: 0;width:100%;}</style>'));
    var $footer = $("#jquery-fixfooter");

    var FixFooter = function(){
        $footer.removeClass("jquery-fixfooter");
        var contentHeight = document.body.scrollHeight; //网页正文全文高度
        var winHeight = window.innerHeight;             //可视窗口高度，不包括浏览器顶部工具栏
        if(!(contentHeight > winHeight)){               //当网页正文高度小于可视窗口高度时
            $footer.addClass("jquery-fixfooter");       //为footer添加固定样式
        }
    };

    $(document.body).resize(FixFooter);
    $(FixFooter);
})();

使用方法

1. 先加载 jQuey 库，版本为1.7以上
2. 加载 jquery-fixfooter.js
3. 加载 jquery-resize.js（后面有说明）
4. 对要实现的元素（如按钮）指定id为jquery-fixfooter
   例子：

   <footer id="jquery-fixfooter"/>Copyright 2018 luoluolzb.cn</footer>
   

jquery-resize.js

代码中的这一行：

$(document.body).resize(FixFooter);

该resize方法非jQuery原始方法，这也是一个插件，作用是监听html元素的大小改变事件。

代码来自 https://blog.csdn.net/z470259742/article/details/52174329

/**
 * jQuery插件：扩展Jquery的resize方法
 * 作者：ZW
 * 时间：2016年6月24日 下午1:57:30
 * @param $
 * @link https://blog.csdn.net/z470259742/article/details/52174329
 */
(function(){
    /**
    * 扩展resize方法(可支持window和非window对象)
    * callback:回调函数(长宽发生变化时触发)
    */
    $.fn.resize = function(callback){
        $(this).each(function (){
            var resizeDom = this;
            resizeDom.callback = callback;

            // 确定绑定的对象是否是window
            if (this == window) {
                window.onresize = function () {
                    resizeDom.callback();
                };
            } else {
                $(this).divResize(callback);
            }
        });
    };

    /**
     * 封装非Window对象的resize方法
     * callback:回调函数(长宽发生变化时触发)
     */
    $.fn.divResize = function(callback){
        var cycleTime = 250; // 定义监控大小变化的时间
        if (callback == undefined || callback == null) {
            return;
        }
        if (!(typeof callback == "function")) {
            return;
        }

        $(this).each(function(){
            var resizeDom = this;
            resizeDom.data = {};
            resizeDom.data.width = $(resizeDom).css("width"); // 存放当前宽度
            resizeDom.data.height = $(resizeDom).css("height"); // 存放当前高度
            resizeDom.callback = callback;
            // 定义监控函数
            var resizeMonitor = function () {
                // 判断高度和宽度是否发生变化
                if ($(resizeDom).css("width") != resizeDom.data.width
                    || $(resizeDom).css("height") != resizeDom.data.height) {
                    resizeDom.data.width = $(resizeDom).css("width");
                    resizeDom.data.height = $(resizeDom).css("height");
                    resizeDom.callback();
                }
                var callFunc = arguments.callee; // 获取本身函数
                setTimeout(function () {
                    callFunc();
                }, cycleTime);
            };
            resizeMonitor();
        });
    };
})();