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

**URL:** <https://community.hubspot.com/t/adding-body-classes-when-a-template-is-loaded-and-scrolled/2826>\
**Category:** CMS Development\
**Created:** [July 26, 2017, 6:53am UTC](https://community.hubspot.com/t/adding-body-classes-when-a-template-is-loaded-and-scrolled/2826 "2017-07-26T06:53:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alponce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alponce/32/92090_2.png) [@alponce](https://community.hubspot.com/u/alponce)\
**Post date:** [July 26, 2017, 6:53am UTC](https://community.hubspot.com/t/adding-body-classes-when-a-template-is-loaded-and-scrolled/2826/1 "2017-07-26T06:53:07Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [July 26, 2017, 9:27am UTC](https://community.hubspot.com/t/adding-body-classes-when-a-template-is-loaded-and-scrolled/2826/2 "2017-07-26T09:27:55Z")

</div>

Hi @alponce,

Check this solution out:-

```auto
<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.

---

<div class="post-metadata">

**Author:** ![alponce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alponce/32/92090_2.png) [@alponce](https://community.hubspot.com/u/alponce)\
**Post date:** [July 27, 2017, 2:04am UTC](https://community.hubspot.com/t/adding-body-classes-when-a-template-is-loaded-and-scrolled/2826/3 "2017-07-27T02:04:27Z")

</div>

Hi [KularanjanC](https://community.hubspot.com/t5/user/viewprofilepage/user-id/13145),

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!

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [July 27, 2017, 5:08am UTC](https://community.hubspot.com/t/adding-body-classes-when-a-template-is-loaded-and-scrolled/2826/4 "2017-07-27T05:08:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alponce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alponce/32/92090_2.png) [@alponce](https://community.hubspot.com/u/alponce)\
**Post date:** [July 27, 2017, 8:51am UTC](https://community.hubspot.com/t/adding-body-classes-when-a-template-is-loaded-and-scrolled/2826/5 "2017-07-27T08:51:03Z")

</div>

It worked! Thank you so much for the help KularanjanC!  
 ![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png)