css属性sticky(粘性定位)固定导航

sticky(粘性定位)解释:

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。设置该属性的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。

使用sticky实现固定导航头部

在以前,我们实现的主要思路就是使用js监听页面滚动事件,然后判断导航距离顶部的距离,为其动态添加position:fixed属性,这样写起来相对麻烦,并且实现的效果也不是很理想(滚动会有抖动),如果用sticky属性将变得非常容易,并且实现效果会更好。

实现代码




	demo
	


	
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第5行
  • tab1
  • tab2
  • tab3
  • tab4
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行
  • 第1行
  • 第2行
  • 第3行
  • 第4行

最终效果
css属性sticky(粘性定位)固定导航_第1张图片
目前不友好的地方(兼容性)
css属性sticky(粘性定位)固定导航_第2张图片

你可能感兴趣的:(日志)