八行代码js实现吸顶效果

上次使用了css实现吸顶的方法，这次使用原生js来实现这个效果

做这个效果的前提：掌握offset系列 ,掌握scroll系列

offsetWidth:元素的内容宽+左右padding+左右border

offsetHeight:元素的内容高+上下padding +上下border

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

offsetLeft: 当前元素的左边，到定位父元素的距离，如果没有定位父元素，指的就是元素到body的距离

onscroll:滚动条触发的事件，只要滚动条滚动就会触发，滚动条在谁身上就给谁加滚动条

这是屏幕的滚动距离

document.documentElement.scrollTop || document.body.scrollTop

给屏幕添加滚动事件

window.onscroll=function(){

//获取滚动距离，提前给body设置高度

var top=document.documentElement.scrollTop || document.body.scrollTop

}

实现效果

向下滚动的时候：

到达一定高度的时候，红色的div会固定在顶部

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('#a').before('<div>789</div>')。

3、浏览器运行index.html页面，此时在div标签“123”的最前面成功插入了新的元素“789”。

---