Question

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

+-------------------------------+
| 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。

我怎样才能做到这一点？

Answer 1

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

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

Answer 2

仅仅为了记录，以下是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>

使用标题滚动div但在标题消失时将其固定在20px顶部

2 个答案: