CSS如何创建一个悬停的导航栏？

Question

1. 一个非常常见的需求。在一个信息流中，有一个导航栏，当导航栏滑动到顶部的时候，则悬停。其他情况下，跟随文档流进行滑动

Answer 1

position: 'fixed';
top: 0;
left: 0;
width 100%;
是要动画效果就js来写啊

Answer 2

传送门

Answer 3

先判断滚动条的位置
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
然后在判断元素的高度var elOffsetTop=document.getElementById(el).offsetTop;
当scrolltop高度大于元素高度时，添加元素的position：fiexed的样式，否则移除设置position:fiexed的样式

Answer 4

https://www.cnblogs.com/qikey...

Answer 5

一般的做法是通过position: fixed;进行布局，这样可以让navigator导航相对于窗口固定，并且在scroll事件中，对导航栏进行控制，不过这种方式需要js进行配合使用。

在最新的布局方式中，有一个新的属性可以很简单的做出悬浮的导航栏。它不需要使用任何的js代码，并且会向后兼容，老版本的浏览器种导航栏会跟着文档流一起被移动。具体的做法如下：

    position: sticky;
    position: -webkit-sticky;
    top: 20px;

使用sticky属性可以很方便的实现悬停导航栏的方案。

positon对sticky的使用

可以从我的codepen中看到具体实现

code of 粘性布局实现点击预览