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!
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.
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!
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.
It worked! Thank you so much for the help KularanjanC!
