Make header sticky on specific page (7.1)

Site URL: https://pelican-chiton-xwy4.squarespace.com/shop/fos-classic

Hello,

I'd like my header / top nav to remain sticky on scroll only for my Product pages (this page #item-5dfb3eba5179d73d7b6fa175 for example).

Is there an easy way to do that using custom CSS?

thanks

Add to page Settings > Advanced > Header

<style>
  header#header {
    position: fixed !important;
    z-index: 999;
    background: #fff !important;
}
</style>