スクロール時にヘッダーの下部に影を付ける

目的は、ウィンドウがスクロールされたときに（固定配置された）ヘッダーの下部に影を追加することです。しかし何らかの理由で、このコードは動作していないようです。スクロールすると何も起こりません。どんな助けもありがとう。スクロール時にヘッダーの下部に影を付ける

CODE

Javaスクリプトは、私のHTMLドキュメントのヘッド部分に書かれています。あなたのコードで

<script> 
 
$(window).scroll(function() {  
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 0) { 
 
\t $("#header-home").addClass("shadow"); 
 
    } 
 
    else { 
 
\t $("#header-home").removeClass("active"); 
 
    } 
 
}); 
 
</script>

#header-home{ 
 
    position:fixed; 
 
    width:100%; 
 
    top:0; 
 
    left:0; 
 
    background-color:#fff; 
 
    z-index:900; 
 
} 
 

 
.active { 
 
    box-shadow: 0 4px 2px -2px #f1f1f1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<header id="header-home"> 
 
    <!-- header content here --> 
 
</header>

出典

2016-07-05 M.Hasham

あなたはクラス 'shadow'を追加しますが、あなたのCSSには、すでにコメントで述べたよう名前がタイプミス間違い –

投票active''であるのです。コメント、特に他の人のコメントの回答をする必要はありません。 – vsync

でなければなりません期待

$("#header-home").addClass("shadow");

を持っています。最初に、あなたはクラス "shadow"を適用していましたが、class "active"（shadow/shadowだったはずです）を削除していました。ボックスシャドウコードを作成するには、this linkを使用します。

この例では、前述のエラーが修正された後は、コードが基本的に正しいことを示しています。

$(window).scroll(function() {  
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 100) { 
 
    $("#header-home").addClass("shadow"); 
 
    } 
 
    else { 
 
    $("#header-home").removeClass("shadow"); 
 
    } 
 
});

html,body{height:2000px;} 
 
#header-home{position:fixed; height:50px;width:100%; top:0; left:0; xbackground-color:black; xcolor:#fff; z-index:900;} 
 

 
.active { box-shadow: 0 4px 2px -2px #f1f1f1; } 
 
.shadow {border:3px solid orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    
 
<header id="header-home"> 
 
     header content here 
 
</header>

出典

2016-07-05 11:15:05 gibberish

ありがとうございます。 –

私はあなたが問題のカップルを持っていた

$("#header-home").addClass("active");

出典

2016-07-05 11:08:33

のための近いため – vsync

@vsync私は自分のコメントを書いていたので、私は答えを書いていました。さらに、タイトルごとに、コメントの質問に答えるのを避ける必要があります。「コメントを使用してより多くの情報を求めたり、改善を提案したりします。 –

スクロール時にヘッダーの下部に影を付ける

答えて

関連する問題