滾動時在標題底部添加陰影

目標是在窗口滾動時向（固定位置）標題的底部添加陰影。但由於某種原因，這段代碼似乎沒有工作。當我滾動時，沒有任何反應。任何幫助將不勝感激。滾動時在標題底部添加陰影

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

你有一對夫婦的問題。首先，你正在應用類「影子」，但刪除類「活躍」（應該是影子/影子），其次你的影子代碼不起作用。使用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("shadow");

哪我預計應該是

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

來源

2016-07-05 11:08:33

在評論中已經說過了。不需要從評論中，特別是其他人的評論中作出回答。 – vsync

@vsync我在寫評論時寫了我的答案，直到之後才注意到。另外，根據標題，您應避免回答評論中的問題：「使用評論以徵求更多信息或提出改進建議，避免在評論中回答問題。」 –

滾動時在標題底部添加陰影

回答

相關問題