寫在前面
頁面交互中經(jīng)常會有這樣的需求：隨著滾動條的滾動轿偎，當(dāng)某個包含重要信息的元素不在當(dāng)前視野范圍內(nèi)時，我們需要fixed到頁面上方或者底部，有一種簡單的實現(xiàn)方法闷叉，不用關(guān)注文檔高度庇勃，不用計算滾動條的卷曲的高度檬嘀，使用getBoundingClientRect()提供的信息來實現(xiàn)。
element.getBoundingClientRect方法
- 先看返回值
document.getElementsByClassName('priceFixedOuter')[0].getBoundingClientRect();
返回值如下：
- 簡單說明
返回值中除了width和height之外其他的屬性值都是相對于視窗左上角來說的责嚷。與滾動條的位置有關(guān)系鸳兽。當(dāng)滾動條的位置發(fā)生變化時，這些值會跟著發(fā)生變化罕拂。
fixed效果方法實現(xiàn)舉例
// 該例子是當(dāng)滾動條滾動到能看到定制總價容器時揍异，隱藏定制總價fixed容器全陨。
// ??定制總價容器和定制總價fixed容器為兩個容器。
var $fixedPriceWrap = $('.priceFixedOuter'); // 定制總價fixed容器
var $priceWrap = $('.submitWrap'); // 定制總價容器
var priceWrap = $priceWrap[0];
var winHeight = $(window).height(); // 可視窗口的高度
// 滾動條滾動到底部能看到定制總價時衷掷，隱藏總價fixed.
$(window).on('scroll', function () {
var priceWrapTop = priceWrap.getBoundingClientRect().top; // 定制總價容器頂部距離窗口的高度
if (priceWrapTop - winHeight < 0) {
$fixedPriceWrap.hide();
} else {
$fixedPriceWrap.show();
}
});
寫在最后
幾個高度
- 文檔高度
Math.max(document.documentElement.clientHeight, document.body.clientHeight); - 滾動條卷去的高度
Math.max(document.documentElement.scrollTop, document.body.scrollTop);
