方法一:
JS部分:
var middle=document.getElementsByClassName('middle')[0];
window.onscroll=function(ev){
var e=window.event||ev;
if(document.documentElement.scrollTop>400){
middle.style.position='fixed';
middle.style.top='0px';
middle.nextElementSibling.style.marginTop='100px'
}
else{
middle.style.position='';
middle.nextElementSibling.style.marginTop=''
}
}
解释:
使用JS监听向下滚动的距离,等到了这个距离,给相应的节点添加上css样式fixed和top属性
方法二:
position:sticky