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

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 に答える