CSS实现导航栏固定在顶部

CSS实现导航栏固定在顶部,下面利用另外一种万能方式处理
既然浏览器对sticky支持不友好，那就用代码把他俩动态切换达到结合的效果（relative和fixed是不分浏览器的）
思路：
前提时需要监听scroll事件
1）滚动条不动时，是静态相对定位状态relative
2）当页面滚动超出设置距离时，改变样式属性 切换定位状态fixed，同样需要给top设置一个值

---

css部分

.box{
	  position: relative;
	  height: 80px;
	  width: 100%;
	  z-index: 999;
	}
.box-active{
  position: fixed;
  top: 0;
}

js部分

// 监听事件
 window.addEventListener('scroll', function(){
 	let t = $('body, html').scrollTop();   // 目前监听的是整个body的滚动条距离
 	if(t>0){
		$('.box').addClass('box-active')
	}else{
		$('.box').removeClass('box-active')
	}
 })

这样就可以兼容很多浏览器了