带有屏幕滚动的动态css通知栏

Question

默认情况下，我有一个“隐藏”在标题后面的通知栏：

​

​

只有在AJAX请求(通过jQuery动画())之后才会显示，以便告诉用户它是否成功：

​

​

但是当用户向下滚动页面时，没有看到标题，就像我目前构建它的方式一样，它只是悬在空中。

​

​

因此，有两个案例：

1. 如果用户看到了标题，它应该就在它下面--
2. ，如果用户没有看到标题，它应该附加到页面

的顶部。

当然，当用户滚动时，它应该在状态之间平稳地移动。

，我该怎么做？只使用CSS /带有JS?

Answer 1

使用position:relative在您的CSS中定位信息栏。让每一个人都在这种正常状态下工作。

然后使用Javascript窗口上的scroll事件来确定用户是否滚动了超过头的高度。如果是这样的话，将一个类添加到使用position:fixed; top:0;设置其位置的信息栏中。

当scrollTop高度小于标头的高度时，删除该类