3

スティッキーヘッダーがあり、その下にボックスシャドウがあります。ユーザーが下にスクロールしたときにのみボックスの影を表示したいのですが。また、ユーザーがページの一番上にスクロールして戻ると、影が消えるはずです。

私はこのjsfiddleで同様の解決策を見ました：

var header = $('.header');

$(window).scroll(function(e){
    if(header.offset().top !== 0){
        if(!header.hasClass('shadow')){
            header.addClass('shadow');
        }
    }else{
        header.removeClass('shadow');
    }
});

css：

.header {
    font-size:24px; 
    width:100%;
    height:60px; 
    background:white; 
    position:fixed
}

.header.shadow {
    box-shadow:0px 5px 5px rgba(0,0,0,.5);
}

body {
    height:1000px; 
    background: rgb(169,3,41); 

    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); 

    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); 

    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 

    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
    
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 

    /* IE10+ */
    background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 

    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

その後、ここで実装されました：http: //www.provisiontree.co.in/

例のWebサイトのように、ボックスシャドウをフェードイン効果で表示する方法を知っている人はいますか？

4

1 に答える 1

2

scrollウィンドウのイベントをキャッチする必要があります。

jQueryを使用するフィドルをここで確認できます：http：//jsfiddle.net/DQv33/

ウィンドウのscrollTopプロパティは、あなたが上にいるかどうかに関係なく表示される($(window).scrollTop() == 0)ので、これはヘッダーのボックスシャドウを設定/設定解除するための条件です。

于 2012-09-28T06:42:23.603 に答える