0

私はこのhtmlとcssコードを持っています:

<div class="header">

</div>

.header {
    top:0;
    left:0;
    right:0;
    width:100%;
    background:#3b5998;
    height:95px;
    margin-bottom: 50px;
position:fixed;
}

私がここでやろうとしているのは、ユーザーが下にスクロールするたびに、ヘッダーが固定位置 (上) にあることです。私はそれで問題ありません。私はそのタスクを簡単に達成しました。

ユーザーが下にスクロールしたときに、別のスタイルを追加したいと考えています。ユーザーが下にスクロールしたときにボックスの影の効果を追加して、上に見えるようにしたいと思います。ユーザーが上にスクロールして Web ページの上部に到達すると、デフォルトの CSS スタイル (ボックスの影がない) に戻ります。

より言うように:

下にスクロール = ボックスの影効果を有効にする

上にスクロールして一番上に到達した場合 = 元に戻す

私はこれのためのcssコードを認識していません.おそらく誰かがコードを作成するためにjavascript/jqueryの専門知識で私を助けてくれますか?

私の説明が長すぎたり、少し混乱したりして申し訳ありません。どうもありがとうございました！

4

3 に答える 3

0

このようにしてみてください 

$(window).scroll(function(){
if (document.body.scrollTop === 0)
     $(".header").css({"box-shadow":"none"});
else
     $(".header").css({"box-shadow":"0px 0px 1px #EEE"});
});

参照用のデモのみを参照してください

于 2013-02-07T15:44:36.597 に答える
0

このようなもの？

var win = $(window),
    doc = $(document),
    header = $('.header');

win.scroll(function(e) {
    var scrollPercent = win.scrollTop() / (doc.height() - win.height()),
        scrollPercentRounded = (scrollPercent * 100).toFixed(2);

    header.css({boxShadow: '0 0 ' + scrollPercentRounded + 'px #000'});
});

デモ

于 2013-02-07T15:53:34.297 に答える
-2

このコードを使用すると、スムーズな移行が得られます。

var $doc = $(document),
    $target = $('.header'),
    limit = 200,
    shadowStyle = '0 2px 5px',
    rgb = '0,0,0';

$(window).scroll(function() {
    var top = $doc.scrollTop();

    if (top <= limit) {
        var opac = 1/limit*top;
        $target.css('box-shadow', shadowStyle+' rgba('+rgb+','+opac+')');
    }
});

影のスタイルを簡単に変更し、limitフェードイン/アウトする範囲を定義できます。

于 2013-02-07T16:07:03.730 に答える