网站顶部的导航栏固定与否,显示隐藏与否的问题?
如果不固定(position: relative),那么滚屏时,导航栏就看不到了,如果需要定位点击导航栏的某个选项跳转页面时比较麻烦,要先返回顶部,然后再点击跳转。
如果固定(position:fixed),那么无论滚屏与否,始终有个导航栏浮在页面内容上面,特别是第一屏内容,会被挡住某部分,当然对第一屏处理一下就行了。
虽然用js控制css,可以实现两种方式的结合,但是在手机端的会出现其他问题。就想有没有两者结合的css属性,结果找到了粘性布局属性position:sticky,当然兼容性还不太好。但是这篇文章(position:sticky实现iOS6+下的粘性布局,相关代码栗子),可以解决这个问题。
到这里,已经挺不错了。但是我还想更好点。
- 页面一出来导航栏位于最顶部
- 滚屏时,导航栏浮在顶部,不会消失。
- 滚多屏时,不想看到导航栏,当我需要关注时在出现再顶部。
到目前为止只解决了前面2点。最后一点,通过搜索,找到了,一个好的思路,就是IBM官网的导航栏。