Hey guys,
I would like to have my navigation bar (header) change colour on a scroll. I found below .js snippet listening to such an event. I only seem to be able to apply changes to the background colour of the bar and the font colour of the links. I would like to also have my logo and the shopping cart change colours. Any ideas what I need to insert in addition to below?
Thanks!
CSS
#header {
background-color: rgba(0,0,0,0);
transition: background-color 500ms ease;
&.is-scrolled { background-color: white; }
}
header#header.shrink a {
transition: color 500ms ease;
color: black;
}
JavaScript
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(window).on("scroll",function(){
var header = $("#header");
if ($(window).scrollTop() >= 100) {
header.addClass("is-scrolled");
} else {
header.removeClass("is-scrolled");
}
});
</script>
