基于 jQuery 的页脚实现

AlphaGooo 发布于2019-08-20 11:18 / 545人阅读

摘要：目标实现页面页脚效果，即页脚部分在页面内容较少没有占满全部屏幕的时候可以处于页面最底部，当页面内容较多的时候则处于正常布局位置。此时我们可以添加事件，使得页脚元素能够在浏览器尺寸发生变化时一直处于正确的位置。

目标：实现页面页脚效果，即页脚部分在页面内容较少（没有占满全部屏幕）的时候可以处于页面最底部，当页面内容较多的时候则处于正常布局位置。

1. 思路

1. 首先我们得到页脚元素

    var $footer = $("#footer");

2. 计算与页脚元素紧邻的上一元素的底端位置

我们计算上一元素的底端位置，并将该值与页脚元素的高度相加，如果这一加和值大于浏览器高度，那么该页脚元素可以处于正常布局位置（如右侧图示）；反之则需要对页脚附加一个 margin-top 以将其放置在页面底端（如左侧图示）。

    var $prev = $footer.prev();
    // 方法一：用上一元素的顶部坐标加上其高度
    var prevBottomPosition = $prev.offset().top + $prev.outerHeight(true);
    // 方法二：用页脚元素的顶部坐标减去原有 margin-top 值
    var prevBottomPosition = $footer.offset().top - parseInt($footer.css("margin-top"));

3. 计算不添加 margin-top 属性时页脚元素的底端坐标，并与浏览器高度对比从而确定页脚元素的处理情况

    // 页脚高度
    var footerHeight = $footer.outerHeight();
    // 获取不作调整时的 footer 底端坐标
    var predictBottomPosition = prevBottomPosition + footerHeight;
    // 计算浏览器高度值
    var windowHeight = $(window).height();
    if(predictBottomPosition < windowHeight){
        var offset = windowHeight - prevBottomPosition - footerHeight;
        $footer.css("margin-top", offset + "px");
    }

2. 注意

当运行这些代码的时候，会出现页脚元素从原始位置闪到处理后位置的情况，这时我们可以给页脚元素添加样式 visibility:hidden，并在之前的 js 代码后加上 $footer.css("visibility", "visible") 即可；

实际使用中可能会出现浏览器缩放的问题，这时原本调整好位置的页脚可能会因为页面高度变化而不能显示在正确位置。此时我们可以添加 resize() 事件，使得页脚元素能够在浏览器尺寸发生变化时一直处于正确的位置。

3. 总结

我们将以上思路整合，并以 $.fn 的方式给 jQuery 实例加一个扩展，之后就能以 $("#your-footer-id").footer() 的方式使用这一脚本了。

HTML：

footer.js：

    (function($){
        $.fn.footer = function(){
    
            var $footer = $(this);
    
            $footer.css("visibility", "hidden");
            $footer.css("margin-bottom", 0); // footer 元素不应具有下外边距
            // 获取相邻元素
            var $prev = $footer.prev();
            // 相邻元素的底端坐标( 考虑 margin 值 )
            // var prevBottomPosition = $prev.offset().top + $prev.outerHeight(true);
            // console.log(prevBottomPosition);
            // footer上一相邻元素的顶端坐标( 考虑 margin 值 ), 上一种计算方法也可以
            var prevBottomPosition = $footer.offset().top - parseInt($footer.css("margin-top"));
            // 计算 footer 的高度值, 这里不考虑外边距, 只考虑内边距和边框
            var footerHeight = $footer.outerHeight();
            // 获取不作调整时的 footer 底端坐标
            var predictBottomPosition = prevBottomPosition + footerHeight;
            // 计算浏览器高度值
            var windowHeight = $(window).height();
    
            if(predictBottomPosition < windowHeight){
                var offset = windowHeight - prevBottomPosition - footerHeight;
                $footer.css("margin-top", offset + "px");
            }
            $footer.css("visibility", "visible");
        }
    })(jQuery);

效果：

4. 参考

footer.js - Github

JavaScript、jQuery 获取浏览器和屏幕各种高度宽度

理解 jquery的 $.extend()，$.fn 和 $.fn.extend()

云服务器海外云主机基于webrtc实现对讲 webrtc基于Java实现基于腾讯云实现移动直播基于stm32实现webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80493.html

紧贴底部的页脚

摘要：这样就可以了我们只需要四行简单的代码，就完美实现了紧贴底部的页脚。后记上面是我总结的四种方法，如果还有什么更好的方法，欢迎共同探讨参考资料总在底部的页脚揭秘前言在写前端页面时，经常会遇到这种情况：有一个具有块级样式的页脚，当页面内容足够长时它一切正常；有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来；页脚不能像我们期望中那样紧贴在视口的最底部，而是紧跟在内容的下方。那么...

greatwhole 2019-08-29 12:45 评论0 收藏0
css的结构与布局

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...

GeekQiaQia 2019-08-29 12:25 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

figofuture 2019-08-30 13:13 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

BearyChat 2019-08-22 10:49 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

renweihub 2019-08-01 16:04 评论0 收藏0