Adding body classes when a template is 'loaded' and 'scrolled'

[alponce]

Hi All, 

I am very new to HubSpot and would like to ask if anyone knows here how to add classes on a body? Like for example, there would be a different display when a template is loaded and when the template is scrolled. My exact scenario is, I have this header where it has no background color when it is loaded, and background color will become black when it is scrolled. 

Thank you very much in advance!

[Anonymous · Accepted solution]

Hi @alponce, 

Check this solution out:-

<script>
// Add class to Body on Page Load

$('body').addClass('myclass');

// On Page Scroll - Mostly to have fixed header

$(window).scroll(function(){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
body = document.querySelector(".header-container");
if ($(this).scrollTop() > 0){
$('body').addClass("fixed-header");
}
else{
$('body').removeClass("fixed-header");
}
});


</script>

<style>
.header-container-wrapper{
background:#fff;
}

body.fixed-header .header-container-wrapper{
background:#000;
}
</style>

I feel this is what you're looking for. Hope it helps.

[alponce]

Hi KularanjanC,

Thank you for this! Should this be in a js file? Do I need to create a custom js file then link my template there? 

Thank you very much in advance for the help!

[Anonymous]

This can be added in the header part in a Custom HTML file with 'Edit Options'  -> Inline Styling --> "display:none;" or you can make a js file and link it here using script source.

When you give display:none for the Custom HTML with script, it removes unncessary spacing.

[alponce]

It worked! Thank you so much for the help KularanjanC!