I have the following code. The object is to add a shadow to the bottom of a (fixed positioned) header when the window is scrolled. But for some reason, this code does not seem to be working. When I scroll, nothing happens. Any help will be appreciated.
The java script is written in the head part of my html document.
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$("#header-home").addClass("shadow");
}
else {
$("#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>