I want my sidebar to change color when the user scrolls down below a certain element. I want the background to change from transparent to black, but slowly so it looks like it's fading to black. Below I had some old code and I'm trying to modify it.
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".project").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(".sidebar").css("background-color","transparent")) {$(".sidebar").css("background-color","black");}
} else { //object goes out of view (scrolling up)
if ($(".sidebar").css("background-color","black")) {$(".sidebar").css("background-color","transparent");}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
The sidebar's background is transparent, but when you scroll below the div with the image, I need the background to turn black. It does this but it just snaps to black. How can I accomplish the fade effect? I tried .fadeIn and .fadeOut but the whole sidebar along with the menu items fade in and out. I also looked at trying .animate() but it doesn't work with background colors. Am I missing something simple? Below is the CSS.
.sidebar {
height: 100%;
width: 130px;
margin-top: 34px;
position: fixed;
z-index: 1;
background-color: transparent;
overflow-x: hidden;
padding-top: 35px;
}
.sidebar a {
padding: 20px 8px 20px 16px;
text-decoration: none;
font-size: 18px;
color: whitesmoke;
display: block;
}
.sidebar a:hover {
color: #f1f1f1;
}
@media screen and (max-width:1000px) {
.sidebar {
visibility: hidden;
}
}