0

提案をお寄せいただきありがとうございます。基本的な視差スクロール要素を使用するサイトを構築しようとしています。基本的に、ヘッダーはページの上部から 60% の位置に配置されます。ユーザーがスクロールすると、ヘッダーの下のコンテンツがヘッダーに追いつき、その下に流れます。

これらすべてを完全に機能させることができますが、ヘッダーがページの上部に表示されたときにヘッダーをページの上部に貼り付けたいと思います。ある程度の作業はできましたが、ヘッダーがスタックすると、非常に派手/ジャンプします。同様の問題を抱えている他の人を見たことがありますが、ヘッダーの位置を静的から固定に切り替えたことが原因のようですが、私のレイアウトではヘッダーは常に固定されているため、少し困惑しています。私が使用しているポジショニングは少し奇妙に思えるかもしれませんが、多くの実験の後、これは私が得ることができる最も近いものです.

JSFiddle とコードは次のとおりです。

http://jsfiddle.net/kromoser/Lq7C6/11/

JQuery:

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled > $('#header').offset().top) {
        $('#header').css('top','-60%');
     }
    else {
        $('#header').css('top',(0-(scrolled*0.6))+'px');
     }
});

CSS:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#header {
  position: fixed;
  top: 0;
  margin-top: 60%;
  z-index: 3;
  background: #FFF;
  width: 100%;
}
#content {
  min-height: 100%;
  position: relative;
  top: 100%;
}

HTML:

<div id="header">This header should stick to top when scrolled.</div>
<div id="content">Content goes here</div>

助けてくれてありがとう！

4

3 に答える 3

1

これは、スクロール関数が呼び出されるたびにヘッダーに css を適用するためです。これは、ユーザーがスクロールするたびに発生します。適用されると、if ステートメントの 2 つの値の間で常にジャンプします。

これを実行するより良い方法は、ヘッダーが一番上の位置にあるときにクラスをヘッダーに適用し、そのクラスをcssでスタイリングすることだと思います。その後、addClass() が複数回適用されても、css によってジャンプすることはありません。

if( scrolled > $('#header').offset().top){
    $('#header').addClass('top');
}

.top {
  top: 60px; // or whatever amount you want it to stay when it is done moving
}
于 2013-10-21T15:20:32.177 に答える