/*获取元素到页面顶部的距离 */
function getElementToPageTop(el) {
	//参数为需要获取到页面顶部高度的html元素
	if (el.offsetParent) {
		return getElementToPageTop(el.offsetParent) + el.offsetTop
	}
	return el.offsetTop
}
/*根据滚动条高度设置类名 */
// 第一个参数为操作的节点的类名，第二个参数为增减的类名,参数类型为字符
function setNameByHeight(operateName, dynamicName) {
	window.onscroll = function () {  //鼠标滚轮滚动时调用方法
		//获取滚动条到页面顶部的高度
		var st = document.documentElement.scrollTop || document.body.scrollTop;
		var windowNode = document.getElementsByClassName(operateName)[0]
		var elHeight = getElementToPageTop(windowNode);

		//判断高度,添加或移除类名
		if (st > elHeight) {
			windowNode.classList.add(dynamicName)
		} else {
			windowNode.classList.remove(dynamicName)
		}
	}
}
function interOberverAos(div) {
	const ob = new IntersectionObserver((entries) => {
		for (const entry of entries) {
			if (entry.isIntersecting) {
				div.classList.add('showDiv');
				// ob.unobserve(div); //取消监听
			} else {
				div.classList.remove('showDiv');
			}
		}
	}, {
		root: null, //与其交叉的元素 null表示与视口交叉
		rootMargin: '0px', //对交叉范围进行收缩或扩张
		threshold: 0.3, //交叉的阈值 0为接触即触发回调 1为完全交叉时触发回调
	})
	ob.observe(div);
}

$(function () {
	setNameByHeight('header', 'blueBg');
});