网站顶部的导航栏固定与否，显示隐藏与否的问题？
如果不固定（position: relative），那么滚屏时，导航栏就看不到了，如果需要定位点击导航栏的某个选项跳转页面时比较麻烦，要先返回顶部，然后再点击跳转。
如果固定（position：fixed），那么无论滚屏与否，始终有个导航栏浮在页面内容上面，特别是第一屏内容，会被挡住某部分，当然对第一屏处理一下就行了。
虽然用js控制css，可以实现两种方式的结合，但是在手机端的会出现其他问题。就想有没有两者结合的css属性，结果找到了粘性布局属性position:sticky，当然兼容性还不太好。但是这篇文章（position:sticky实现iOS6+下的粘性布局，相关代码栗子），可以解决这个问题。
到这里，已经挺不错了。但是我还想更好点。
到目前为止只解决了前面2点。最后一点，通过搜索，找到了，一个好的思路，就是IBM官网的导航栏。
position：sticky粘性布局 作用 它是相对定位position:relative和固定定位positi...
网站顶部的导航栏固定与否，显示隐藏与否的问题？如果不固定（position: relative），那么滚屏时，导航...
粘性布局: 结合了 position:relative 和 position:fixed 两种定位于一体的特殊定...
position: sticky（粘性定位） 粘性定位 sticky 相当于相对定位 relative 和固定定位...
先放效果图镇楼：（其实主要效果在于左上角的字母条在滑动过程中黏性覆盖固定） 当前系统支持效果：iOS（当然Andr...
css粘性定位position：sticky问题采坑position: sticky 详解（防坑指南）CSS中po...
渲染是指将数据代入模板的过程 position: sticky 粘性布局，适合滚动场景 中间件（middlewar...
粘性定位 position：sticky 一个定位的奇葩， 设置position:sticky同时给一个(t...
上一篇有讲到采取 position:sticky 的布局方案，使得在iOS环境下顶部标题可以达到一种粘性的效果：...
最近项目中遇到一个需要置顶导航栏的问题，一顿操作用js写好了之后偶然间发现css居然新增了一条属性可以实现同样的效...
本文标题：粘性布局position:sticky
本文链接：https://www.haomeiwen.com/subject/aqhykttx.html
网友评论