13

ユーザーがスクロールすると、コンテンツが徐々にフェードアウトするように、DIV の上部にフェード セクションを追加したいと考えています。これを実現する CSS をセットアップしましたが、問題が 1 つあります。色あせたセクションは、固定されたままではなく、コンテンツとともにスクロールします。

どうすればこれを修正できますか? jQuery の助けが必要ですか、それとも CSS を使用することは可能ですか? これは CSS3 と互換性のあるブラウザー以外で動作しますか? linear-gradient(自分の にまだ正しいベンダー プレフィックスがないことはわかっています)

これまでの私のコードとフィドルは次のとおりです。

.fadedScroller {
  overflow: auto;
  position: relative;
  height: 100px;
}

.fadedScroller:after {
  content: '';
  top: 0;
  left: 0;
  height: 20px;
  right: 0;
  background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(251,251,251,0) 100%);
  position: absolute;
}

アップデート

フィドルを更新position: fixedして、色あせたセクションが実際には機能しないことを指摘し、上部に固定されていない div を含む上に表示されます。

4

4 に答える 4

11

グラデーションを保持する 2 つ目の div を作成し、それをコンテンツ div の上に移動すると機能します。私はこれがちょっと汚れていて、書くのがあまり直感的ではないことを知っていますが、うまくいきます.

HTML:

<div class="fadedScroller">
   ...
</div>
<div class="fadedScroller_fade"></div>

CSS:

.fadedScroller {
    overflow: auto;
    position: relative;
    height: 100px;
}

.fadedScroller_fade {
    content:'';
    margin-top: -100px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
    position: relative;
}

デモ：

https://jsfiddle.net/hP3wu/12/

于 2013-06-11T12:58:28.870 に答える
3

非常に単純で、position:fixed代わりにposition:absolute次のように使用します。

.fadedScroller:after {
    content:'';
    position: fixed;
    top: 0;
    left: 0;
    height: 20px;
    right: 0;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
}

https://jsfiddle.net/hP3wu/4/

アップデート1

https://jsfiddle.net/hP3wu/7/

Update2

https://jsfiddle.net/hP3wu/9/

于 2013-06-11T12:41:29.943 に答える
1

これは非常に大きな回避策であるため、申し訳ありませんが、これが私が考えることができる唯一の方法です: http://fiddle.jshell.net/hP3wu/17/

JQueryで疑似要素を選択できないので、最初に別のものを作成divしましたclass="after":after

次に、 withでdiv.afterスクロールが発生するたびに再配置自体を行いました.fadedScrollbar div

$(".fadedScroller").scroll(function () {
    $(".fadedScroller .after").css("top", $(this).scrollTop());
});
于 2013-06-11T13:06:55.510 に答える