資訊專欄INFORMATION COLUMN
摘要：目標實現(xiàn)頁面頁腳效果，即頁腳部分在頁面內(nèi)容較少沒有占滿全部屏幕的時候可以處于頁面最底部，當(dāng)頁面內(nèi)容較多的時候則處于正常布局位置。此時我們可以添加事件，使得頁腳元素能夠在瀏覽器尺寸發(fā)生變化時一直處于正確的位置。
1. 思路目標：實現(xiàn)頁面頁腳效果，即頁腳部分在頁面內(nèi)容較少（沒有占滿全部屏幕）的時候可以處于頁面最底部，當(dāng)頁面內(nèi)容較多的時候則處于正常布局位置。
var $footer = $("#footer");
我們計算上一元素的底端位置，并將該值與頁腳元素的高度相加，如果這一加和值大于瀏覽器高度，那么該頁腳元素可以處于正常布局位置（如右側(cè)圖示）；反之則需要對頁腳附加一個 margin-top 以將其放置在頁面底端（如左側(cè)圖示）。
var $prev = $footer.prev();
// 方法一：用上一元素的頂部坐標加上其高度
var prevBottomPosition = $prev.offset().top + $prev.outerHeight(true);
// 方法二：用頁腳元素的頂部坐標減去原有 margin-top 值
var prevBottomPosition = $footer.offset().top - parseInt($footer.css("margin-top"));
// 頁腳高度
var footerHeight = $footer.outerHeight();
// 獲取不作調(diào)整時的 footer 底端坐標
var predictBottomPosition = prevBottomPosition + footerHeight;
// 計算瀏覽器高度值
var windowHeight = $(window).height();
if(predictBottomPosition < windowHeight){
var offset = windowHeight - prevBottomPosition - footerHeight;
$footer.css("margin-top", offset + "px");
}
2. 注意
當(dāng)運行這些代碼的時候，會出現(xiàn)頁腳元素從原始位置閃到處理后位置的情況，這時我們可以給頁腳元素添加樣式 visibility:hidden，并在之前的 js 代碼后加上 $footer.css("visibility", "visible") 即可；
實際使用中可能會出現(xiàn)瀏覽器縮放的問題，這時原本調(diào)整好位置的頁腳可能會因為頁面高度變化而不能顯示在正確位置。此時我們可以添加 resize() 事件，使得頁腳元素能夠在瀏覽器尺寸發(fā)生變化時一直處于正確的位置。
3. 總結(jié)我們將以上思路整合，并以 $.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 元素不應(yīng)具有下外邊距
// 獲取相鄰元素
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 的高度值, 這里不考慮外邊距, 只考慮內(nèi)邊距和邊框
var footerHeight = $footer.outerHeight();
// 獲取不作調(diào)整時的 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);
效果：
footer.js - Github
JavaScript、jQuery 獲取瀏覽器和屏幕各種高度寬度
理解 jquery的 $.extend()，$.fn 和 $.fn.extend()
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80493.html
摘要：這樣就可以了我們只需要四行簡單的代碼，就完美實現(xiàn)了緊貼底部的頁腳。后記上面是我總結(jié)的四種方法，如果還有什么更好的方法，歡迎共同探討參考資料總在底部的頁腳揭秘 前言 在寫前端頁面時，經(jīng)常會遇到這種情況：有一個具有塊級樣式的頁腳，當(dāng)頁面內(nèi)容足夠長時它一切正常；有的時候，由于頁面長度不夠，頁面底部的頁腳會很尷尬的跑上來；頁腳不能像我們期望中那樣緊貼在視口的最底部，而是緊跟在內(nèi)容的下方。 那么...
摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當(dāng)視口寬度小于高度時，等于，否則等于?；诘姆椒ㄟ@種應(yīng)該算是最佳的解決辦法實現(xiàn)方法當(dāng)使用布局時，使用在水平和垂直方向都會居中。 1.自適應(yīng)內(nèi)部元素 在css中，不給元素一個height值時，元素會自適應(yīng)其內(nèi)部的元素高度，有時我們想讓元素的寬度也達到此效果，應(yīng)用場景如下。 如下當(dāng)前的這種布局，想要改成最外層的div的寬度由當(dāng)前的圖片撐開的...
摘要：當(dāng)列表中至少包含四項時，命中包括該項之后的所有列表項當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應(yīng)布局也可以不用擔(dān)心了，雖然有點點，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應(yīng) CSS3 新增寬度屬性值 width:mi...
摘要：當(dāng)列表中至少包含四項時，命中包括該項之后的所有列表項當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應(yīng)布局也可以不用擔(dān)心了，雖然有點點，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應(yīng) CSS3 新增寬度屬性值 width:mi...
摘要：當(dāng)列表中至少包含四項時，命中包括該項之后的所有列表項當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應(yīng)布局也可以不用擔(dān)心了，雖然有點點，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應(yīng) CSS3 新增寬度屬性值 width:mi...
閱讀 3755·2021-11-22 13:52
閱讀 3628·2019-12-27 12:20
閱讀 2401·2019-08-30 15:55
閱讀 2154·2019-08-30 15:44
閱讀 2272·2019-08-30 13:16
閱讀 585·2019-08-28 18:19
閱讀 1893·2019-08-26 11:58
閱讀 3447·2019-08-26 11:47
