浏览器滚动条滚动到某一位置的时候，页面中的按钮设置为position: fixed

场景

由于页面内容长，导致滚动浏览器滚动条的时候操作按钮不知道在哪个位置，这时候需要把操作按钮固定到页面中，或者在按钮即将消失的时候设置为position: fixed来保证按钮可见。这是一个常见的页面优化方案。

很多电商网站的商品分类也有类似的优化。

js和css基础

获取元素的高度

var div = document.getElementById("btnBar");
var btnH = div.getBoundingClientRect().height;

获取元素的到顶部的距离（滚动滚动条不影响top值）

var btnBarTargetTop = $(targetSelector).offset().top;

获取滚动条滚动位置

var sTop = $(window).scrollTop();

实现方案

先定义一个css样式

.btnBar{
	position: fixed;
    z-index: 9999999;
    width: 100%;
    top: 1px;
}

设置html页面

<!-- 定义一个容器 -->
<div style="height: 70px;">
	<blockquote class="layui-elem-quote" id="btnBar">
		<button type="button" class="layui-btn " 
		onclick="vueApp.mtv.detailList.push({srcUrl:'',doSort:1,remarks:''})">添加</button>
	</blockquote>
</div>

定义一个函数来判断

function checkHeight(barSelector,targetSelector){
			
		var div = document.getElementById("btnBar");
		
		console.log($(targetSelector).offset());
		
		var btnBarTargetTop = $(targetSelector).offset().top;
		var sTop = $(window).scrollTop();
		var btnH = div.getBoundingClientRect().height;
		
		console.log("btnBarTargetTop = " + btnBarTargetTop);
		console.log("sTop   = " + sTop);
		console.log("btnH   = " + btnH);
		if(btnBarTargetTop - sTop - btnH  <= 0){
			$("#btnBar").addClass("btnBar");
		}else{
			$("#btnBar").removeClass("btnBar");
		}
			
	}

监听滚动事件

$(window).scroll(function(){//开始监听滚动条
	checkHeight("#btnBar","#detailForm");
});