Facing problem changing navbar color on scroll

Hi everyone. Im using refresh theme for my shopify store. I made a transparent navbar by using custom script on base.liquid file.

<script>
var sticky = document.querySelector('.header-wrapper'); 

window.onscroll = function(){
if(window.scrollY > 150) {
sticky.style.background = 'black';
}
else {sticky.style.background = 'transparent';}
}

</script>

Now Im facing a tiny problem which Im unable to solve. Navbar doing some problems on other pages. Need some help from the experts.
My shop link: www.nielapparel.com

Hello @Shoaib77

I think you can just set transparent background to homepage, other pages should keep as black. That can be done by this modified code


Thank you so much, that solved the problem

In home page, I want to change the navbar background black on hover. And also the dropdown list’s border radius 0. Can you please tell me how can this be done?

You can add this code to the file base.css

.header-wrapper:hover {
    background-color: #000 !important;
}

.header__submenu {
    border-radius: 0;
}