八行代码js实现吸顶效果

上次使用了css实现吸顶的方法，这次使用原生js来实现这个效果
做这个效果的前提：掌握offset系列 ,掌握scroll系列

出现offsetTop，offsetLeft 一般要用到定位

1. 标签的占位宽高

offsetWidth:元素的内容宽+左右padding+左右border
offsetHeight:元素的内容高+上下padding +上下border

2.标签在当前页面的位置

offsetTop :当前元素的顶部，到定位父元素的距离，如果没有定位父元素，指的就是元素到body的距离 -----用于获取当前元素在页面中的位置
offsetLeft: 当前元素的左边，到定位父元素的距离，如果没有定位父元素，指的就是元素到body的距离

滚动scroll

1.scrollTop 元素被卷去的高

onscroll:滚动条触发的事件，只要滚动条滚动就会触发，滚动条在谁身上就给谁加滚动条
这是屏幕的滚动距离
document.documentElement.scrollTop || document.body.scrollTop
给屏幕添加滚动事件
window.onscroll=function(){
//获取滚动距离，提前给body设置高度
var top=document.documentElement.scrollTop || document.body.scrollTop
}

吸顶效果实现

//样式
div {
            width: 100%;
            height: 100px;
            margin-bottom: 15px;
            background-color: pink;
        }
        
        #red {
            background-color: red;
        }
        body {
            height: 3000px;
        }
//页面
  <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="red"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
//逻辑
 <script>
        var oDiv = document.getElementById("red");
        //div在页面的占位高，div到body的距离
        var otop = oDiv.offsetTop;
        //页面滚动
        window.onscroll = function() {
           //获取页面的滚动距离
            var oheight = document.documentElement.scrollTop || document.body.scrollTop;
            //滚动到一定位置 div固定到顶部 js实现吸顶
            if (otop < oheight) {
                oDiv.style.position = "fixed";
                oDiv.style.top = 0;
            } else {
                oDiv.style.position = "relative";
            }
        }
    </script>

实现效果

image.png

向下滚动的时候：
到达一定高度的时候，红色的div会固定在顶部

image.png