基於 jQuery 的頁腳實現

時間 2019-11-16

原文原文鏈接

目標：實現頁面頁腳效果，即頁腳部分在頁面內容較少（沒有佔滿所有屏幕）的時候能夠處於頁面最底部，當頁面內容較多的時候則處於正常佈局位置。javascript

1. 思路

1. 首先咱們獲得頁腳元素

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

2. 計算與頁腳元素緊鄰的上一元素的底端位置

咱們計算上一元素的底端位置，並將該值與頁腳元素的高度相加，若是這一加和值大於瀏覽器高度，那麼該頁腳元素能夠處於正常佈局位置（如右側圖示）；反之則須要對頁腳附加一個 margin-top 以將其放置在頁面底端（如左側圖示）。css

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') 便可；html
實際使用中可能會出現瀏覽器縮放的問題，這時本來調整好位置的頁腳可能會由於頁面高度變化而不能顯示在正確位置。此時咱們能夠添加 resize() 事件，使得頁腳元素可以在瀏覽器尺寸發生變化時一直處於正確的位置。java

3. 總結

咱們將以上思路整合，並以 $.fn 的方式給 jQuery 實例加一個擴展，以後就能以 $('#your-footer-id').footer() 的方式使用這一腳本了。jquery

HTML：git

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body style="margin:0px;">
    
    <div style="width: 100%; height: 100px; background-color: pink;"></div>
    <div style="width: 100%; height: 100px; background-color: deepskyblue;" id="js-footer"></div>
    
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="footer.js"></script>
    <script type="text/javascript">
        $('#js-footer').footer();
        $(window).resize(function(){
            $('#js-footer').footer();
        });
    </script>
    </body>
    </html>

footer.js：github

(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. 參考

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。