css - 随屏幕滚动的动态CSS通知栏

Question

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

它仅在 AJAX 请求(通过 jQuery animate())后显示以告知用户是否成功:

但是当用户向下滚动页面并且看不到标题时，按照我目前构建它的方式，它只是悬在空中:

所以有2种情况:

1. 如果用户看到标题，它应该就在它的下面
2. 如果用户看不到标题，则应将其附加到页面顶部

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

我该怎么做？仅 CSS/与 JS？

Answer 1

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

然后在 Javascript 中使用窗口上的 scroll 事件来判断用户滚动是否超过了标题的高度。如果是这种情况，请向信息栏添加一个类，使用 position:fixed; 设置它的位置；顶部:0；。

当scrollTop高度小于header高度时移除class