切換滾動CSS屬性

Question

我目前正在嘗試添加一個CSS屬性到一個div當用戶已滾動一定距離的頁面。

<div id="navbar">...</div> 

#navbar { 
    position: fixed; 
    width: 100%; 
    height: 55px; 
    padding: 1px; 
    padding-left: 20px; 
    background: #009688; 
} 

我想box-shadow: 0px 3px 2px #888888;屬性添加到CSS的#navbar，當用戶滾動209px下跌的一頁。我試圖把這些與我在網上找到的jQuery放在一起，但由於我沒有使用jQuery的經驗，所以我無法讓它工作。

$("#navbar").css("box-shadow", "0px 3px 2px #888888"); 

和：

$(document).scroll(function() { 
    $('#navbar').toggle($(this).scrollTop()>209) 
});​ 

我希望我是有道理的。提前感謝您的幫助。

Answer 1

在您的CSS中創建另一個類並使用javascript進行切換。

CSS：

.navbar-scrolled { box-shadow: 0px 3px 2px #888888; }

的Javascript：

$(document).scroll(function() { $("#navbar").toggleClass("navbar-scrolled", $(document).scrollTop() >= 209); });

摘錄如下：

$(document).scroll(function() { 
 
    $("#navbar").toggleClass("navbar-scrolled", $(document).scrollTop() >= 209); 
 
});

#navbar { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 55px; 
 
    padding: 1px; 
 
    padding-left: 20px; 
 
    background: #009688; 
 
} 
 
.navbar-scrolled { 
 
    box-shadow: 0px 3px 2px #888888; 
 
} 
 
#page-filler { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbar">navbar</div> 
 
<div id="page-filler"></div>