写在前面
页面交互中经常会有这样的需求：随着滚动条的滚动，当某个包含重要信息的元素不在当前视野范围内时，我们需要fixed到页面上方或者底部，有一种简单的实现方法，不用关注文档高度，不用计算滚动条的卷曲的高度，使用getBoundingClientRect()提供的信息来实现。
element.getBoundingClientRect方法
- 先看返回值
document.getElementsByClassName('priceFixedOuter')[0].getBoundingClientRect();
返回值如下：
- 简单说明
返回值中除了width和height之外其他的属性值都是相对于视窗左上角来说的。与滚动条的位置有关系。当滚动条的位置发生变化时，这些值会跟着发生变化。
fixed效果方法实现举例
// 该例子是当滚动条滚动到能看到定制总价容器时，隐藏定制总价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);
