使用原生 JS 完成头部吸顶操作
1.通过 querySelector 获取 product 元素节点,获取 product 对象 到其上级层顶部的间隔 offsetTop
2.使用 onscroll 原生方法 监听滚动条滚动的高度
3.当 滚动的高度 大于对象到其上级层顶部的间隔 则对 product 定位进行固定
4.当 其他情况则清空 product 定位的属性
(function (product , productTop , scrollT) {
product = document.querySelector('.product');
productTop = product.offsetTop;
window.onscroll = function () {
scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //对不同浏览器进行适配
if (scrollT >= productTop){
product.style.position = 'fixed';
product.style.top = 4.3 + 'rem';
product.style.left = 0;
}else{
product.style.position = '';
}
}
}())