Is there a way to make my sidebar change color gradually as the user scrolls below a certain point on the page? I want the background to transition from transparent to black, giving it a fading effect. I attempted to modify some existing code without success.
$(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
});
I have been trying to achieve a smooth fade effect when changing the sidebar's background color from transparent to black once the user scrolls past a certain image. However, my attempts with .fadeIn, .fadeOut, and .animate() have not yielded the desired outcome. These methods either affect the entire sidebar or do not work with background colors. Can someone provide insight into how to accomplish this? The CSS for the sidebar is provided below.
.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;
}
}