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

In＆＃39; .message＆＃39;添加＆＃39;位置：固定＆＃39;像这样：

.message {
    background:#181818;
    color:#FFF;
    ...
    ...
    position:fixed;
}

现在应该工作

Answer 2

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

CSS动画：从折叠顶部开始

2 个答案: