我们有一个position: fixed;警报横幅出现在页面的顶部，以显示不同的警报。我们希望它有一个高度(或看起来有高度)，这样它就不会覆盖页面的顶部菜单，而是将页面内容向下推。当用户接受或x从横幅中删除时，页面应该弹出到顶部。当用户向下滚动页面时，横幅应该漂浮在窗口的顶部，并始终保持在屏幕上。
目前的策略是非常笨拙的，并在所有地方使用setBannerHeight()功能，为我们的横幅上方提供一个设置高度，将主页内容向下推，并允许横幅看起来"占用空间"。
它被证明是不可未来证明的，并且会阻止我们的iOS智能应用横幅(一个完全不同的横幅)正确显示。
是否有一种方法，我可以给一个固定的元素一个高度，使粘性元素浮动(到目前为止我不能，这是在一个自包含的alert.component.ts组件，所以不要认为我可以给父元素的高度)，或者，也许第三方警报库，你会建议已经解决了这个问题?
这可能有帮助。这很简单，在CSS中使用position: sticky和一些普通JavaScript。当用户滚动时，警报会停留在页面顶部。当用户点击它时，它就会消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="alert">Alert</div>
<nav>Menu</nav>
<section>
<p>Add enough content here so you can scroll the page.</p>
</section>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
#container {
width: 600px;
margin: 0 auto;
}
nav {
width: 600px;
height: 100px;
background: lightblue;
}
#alert {
width: 600px;
height: 40px;
position: sticky;
top: 0;
background: orangered;
cursor: pointer;
}
section {
width: 600px;
}
const alert = document.getElementById("alert");
alert.addEventListener("click", function() {
alert.style.position = "static";
alert.style.display = "none";
})
一种方法是将CSS类切换到与警报状态(打开或关闭)相匹配的<body>。这个类影响身体的行为，特别是他的top-padding，它应该等于警戒的高度。
现在你所要担心的就是在警报组件的适当显示/隐藏事件上切换类。
body.alert-on {
padding-top: 60px;
}
.alert {
position: fixed;
}