2

ユーザーがページをスクロールするとヘッダーが少し上にスクロールするこのスクリプトがあり、正常に動作しています。ただし、スムーズにスクロールさせたい。私は自分でやろうとしましたが、Javaスクリプトがあまり得意ではありません。

<script>
window.onscroll=function () {
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    if(top > 50){document.getElementById("header").style.position = "fixed";
    document.getElementById("header").style.height="130px"
        }
        else {
        document.getElementById("header").style.position = "relative";
    document.getElementById("header").style.height="373px"
        }
}
</script>

以下に例を示します: jsfiddle.net/largan/FDEJp

どんな助けでも大歓迎です。ありがとう

4

2 に答える 2

1

最初から使用することをお勧めしますposition:fixed。ブラウザーはすでに大量のスクロール計算を行っているので、それをぜひ活用したいと考えています。コツは、スクロールの位置を基準に要素をスムーズに移動させることです。margin-topコンテンツの配置とheightヘッダーに使用しています。また、ブラウザーで既に実行できることをより有効に活用するために、マークアップをクリーンアップしました。ヘッダーとコンテンツを別々に移動していることに注意してください。彼は、より自然で直感的な方法でヘッダーを移動しています。

マークアップ

<div class="container">
  <div id="header"> 
    header
  </div>
  <div id="content">
    <p>...</p>
  </div>
</div>

CSS

.container {
  width: 100%;
  background-color: gray;
}    
#header {
  position: fixed;
  text-align: center;
  background: #880000;
  height: 203px;
  width: 100%;
  top: 0;
  left: 0;
}
#content {
  margin-top: 203px;
  margin-left: auto ;
  margin-right: auto ;
}

JS

window.onscroll = function () {
  var doc = document.documentElement,
      body = document.body,
      top = (doc && doc.scrollTop  ||
        body && body.scrollTop  ||
        0);
  if(top < 75) {
    document
      .getElementById('header')
      .style
      .height = (203 - top * 2) + "px";
  }
  if(top < 130) {
    document
      .getElementById('content')
      .style
      .marginTop = (203 - top) + "px";
  }
}

http://jsfiddle.net/FDEJp/2/

于 2013-09-22T19:59:08.563 に答える
0

まず、どちらの場合も固定配置を使用します。次に行うことは、「if」の代わりに「switch」を使用することです。

switch (top)
    {
        case 0:
            header.style.height="230px;
            break;
        case 1:
            header.style.height="228px";
            break;
        case 2:
            header.style.height="226px";
            break;
        case 3:
            header.style.height="224px";
            break;
        case 4:
            header.style.height="222px";
            break;
        case 5:
            header.style.height="220px";
            break;
        case 6:
            header.style.height="218px";
            break;
        case 7:
            header.style.height="216px";
            break;
        case 8:
            header.style.height="214px";
            break;
        case 9:
            header.style.height="212px";
            break;
        case 10:
            header.style.height="210px";
            break;
        case 11:
            header.style.height="208px";
            break;
        case 12:
            header.style.height="206px";
            break;
        case 13:
            header.style.height="204px";
            break;
        case 14:
            header.style.height="202px";
            break;
        case 15:
            header.style.height="200px";
            break;
        case 16:
            header.style.height="198px";
            break;
        case 17:
            header.style.height="196px";
            break;
        case 18:
            header.style.height="194px";
            break;
        case 19:
            header.style.height="192px";
            break;
        case 20:
            header.style.height="190px";
            break;
        default:
            header.style.height="130px";
            break;
    }

書きやすくするために、最後の高さを 130 ピクセルに変更したことがわかります。これにより、スクロールする「1 トップ」ごとにヘッダーが 2 ピクセル短くなります。時間がないのでコードを完成させずチェックもしませんでしたが、書いて調整すると49ケースあるはずですが、20しか書いていません。

于 2013-09-22T12:36:33.660 に答える