Fixing a search bar to the top of the screen when you scroll

I've seen several posts on this forum suggesting header injections which can keep the site header on the top of the page as you scroll. However, using the squarespace website builder, I've generated a search bar in the body of a page. Is there a possibility of having that fixed to the top of the page when I scroll? I've attached a picture to show the search bar I am talking about.

Please give us the URL for your site. If you've not already done so set up a site-wide password. Post the password here and then we can take a look at your issue.

Site URL: https://thebetterbecauseproject.squarespace.com/stories/

Currently we are not using a site-wide password because the website is published and public.

Thanks for the help.

Add to Home > Design > Custom CSS

.cf-filter-wrapper {
    position: fixed;
    top: 112px;
    left: 0;
    width: 100%;
    z-index: 999;
}

The code partially works; the search bar does fix itself to the top of the page. However, it also makes the rest of the stories block stay fixed to the page. I've put a picture down below.