I have a code that successfully changes the header opacity when scrolling down, but now I want it to change the background color instead. Strangely, the code does not seem to affect this attribute, although it works fine for other attributes like opacity and transition duration. Why is it failing to change the background color?
When I tried uploading the code demo to this site, there was a display error even though it functions correctly on my website:
<script type="text/javascript>
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() === 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
</script>#header-wrap{
background:#D6ECFF;
width:100%;
height:auto;
border-bottom: 1px solid #CCC;
position:fixed;
top:0;/* may not be needed but no harm in having */
z-index:100000;
/* margin:0 auto; needed? */
}
.scroll-opacity-change{
opacity:0.7;
-webkit-transition-duration: 1.0s; /* Safari */
transition-duration: 1.0s;
background:#777a7c;
}