滚动一定距离实现标题悬浮（2种方法）

方法一：

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

作为新增的css3属性，sticky属性作用为：当添加属性的元素还在页面内时，设置的top，left属性不起作用，当滑动屏幕使得元素即将消失，元素将变为fixed属性，总是悬浮在可见区的某一位置。