html - CSS 动画 : drop in from top of fold

Question

我正在开发一个固定在顶部的通知栏，当用户将鼠标悬停在它上面时它会下降。它运行完美，除非用户向下滚动页面并将鼠标悬停在页面上。

HTML:

<div id="bar"></div>
<div class="message"><h1>You have no new notifications!</h1></div>
<div class="container">


 <h1>notification bar</h1>
  <h2>hover above</h2>

</div>

CSS:

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

#bar {
  height: 7px;
background-size: cover;
background-position: left 60%;
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
z-index: 1000;
background-color: #FD4F2F;
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 150px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;

}

.message h1 {
  color:#FFF;
}


.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
  height: 500px;
}


#bar:hover + .message {
  top: 0;
}
/* on mouse hover message, stay on top */
.message:hover {
  top: 0;
}

#bar:hover + .container {
  margin-top: 150px;
}

#bar:hover + label {
  background:#dd6149;
}

这是一个 codepen .

Answer 1

在您的 .message CSS 中，您需要将 position: absolute 更改为 position: fixed