I’d like to have the header be transparent when at the top of the page, and then when the user scrolls down it becomes white.
I tried adding this javascript code in the ‘edit CSS/HTML’ of the </body>
section as follows:
<script>
// When the user scrolls down 100px from the top of the document, change background to white
$(document).ready(function($){
$(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
document.getElementsByClassName("d-header").style.backgroundColor = "white";
document.getElementsByClassName("d-header").style.boxShadow = "0 1px 8px rgba(0,0,0,0.18)";
} else {
document.getElementsByClassName("d-header").style.backgroundColor = "transparent";
document.getElementsByClassName("d-header").style.boxShadow = "unset";
}
});
});
});
</script>
This doesn’t seem to work though. Any ideas?
Ideally I’d like this change to happen at the same time as the page hits the #main-outlet and .d-header changes to a fixed position, but I don’t know how.
1 Like
I managed to get this working well enough.
js:
<script>
var dHeaderWhite = document.createElement('style');
dHeaderWhite.innerHTML = `
/*.docked. .d-header {
position:fixed;
}*/
.d-header {
background-color: white;
box-shadow: 0 1px 8px rgba(0,0,0,0.18);
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}`;
var dHeaderTransparent = document.createElement('style');
dHeaderTransparent.innerHTML = `
/*.docked .d-header {
position:absolute;
}*/
.d-header {
background-color:transparent;
box-shadow: unset;
-webkit-animation: fadeout 0.5s;
animation: fadeout 0.5s;
}`;
// When the user scrolls down the document, change from transparent background to white
$(document).ready(function($){
$(function(){
$(window).scroll(function(){
if ($(".extra-info-wrapper")[0]) {
// White if class exists
document.head.appendChild(dHeaderWhite);
} else if ($(this).scrollTop() > 150) {
// class doesn't exist but user has scrolled
document.head.appendChild(dHeaderWhite);
} else {
// Transparent if class doesn't exist
document.head.appendChild(dHeaderTransparent);
}
});
});
});
</script>
css:
.d-header {
background-color: transparent;
box-shadow:unset;
}
.d-header-icons .d-icon {
color: #9c9c9c;
}
I want the header to start off as scrollable and switched to fixed on scroll, but this doesn’t work yet. I’ll keep hacking away.
1 Like