1

我想在带有标题的页面上显示通知，如下所示：

+-------------------------------+
| header                        |
+-------------------------------+
|                [notification] |
| first line of my text         |
|    second line of my text     |
:                               :

但是，当我向下滚动时，通知应该与标题下方的页面一起滚动，但要滚动到它所top在的最小值20px。所以当我们滚动时，视口应该是这样的：

| header                        |
+-------------------------------+
|                [notification] |
| first line of my text         |
|    second line of my text     |
:                               :

但最终当标题开始从页面上消失时，我对出现在我的文本顶部的通知很好，它的top位置为20px：

+-------------------------------+
|                [notification] |
| first line of my text         |
|    second line of my text     |
|       third line of my text   |
:                               :

并进一步滚动：

| first line of m[notification] |
|    second line of my text     |
|       third line of my text   |
|           fourth line of my t |
:                               :

所以基本上想要显示一个display: fixed;div，top: 20px 除了页面在顶部。

所以当我第一次看到页面时，它的top属性应该是60px. 但是，如果我向下滚动，我希望它top始终保持在20px.

我怎样才能做到这一点？

4

2 回答 2

3

你可以使用一些基本的js，如果你需要支持ie，可以试试jquery！

解决方案：http ://codepen.io/anon/pen/beGtq

于 2013-09-22T02:55:36.670 回答
1

只是为了记录，这里是 Paranoid42 回答的片段，我接受：

CSS

.header {
  height: 40px;
  background-color: #3e8a94;
}

.notification {
  position: fixed;
  height: 20px;
  right: 10px;
  background-color: #3e55c7;
  top: 50px;
}
.content {
  padding:40px;
  line-height: 20px;
  height: 1000px;
  border: 2px solid  #666;
}

JavaScript

window.addEventListener( 'scroll', function() {
  if ( document.body.scrollTop > 50 ) {
    document.querySelector('.notification').style.top = '0px';
  } else {
    document.querySelector('.notification').style.top = '50px';
  }
});

HTML

<html>
  <head></head>
  <body>
    <div class="notification">  notification</div>
    <div class="header"></div>
    <div class="content"><p> Lorem ipsum dolor sit amet, ..... </p></div>
  </body>
</html>
于 2013-09-22T19:24:13.417 回答