Sticky Header with Scroll Behavior

Generate the Liquid, CSS, and JavaScript for a sticky header section for my Shopify theme that I can paste in as a custom section — one that remains fixed at the top of the viewport when the customer scrolls past [SCROLL_THRESHOLD] pixels. The header should contain three areas: a logo on the [LOGO_POSITION] side using an image_picker setting, a navigation menu in the center pulled from the [MENU_HANDLE] menu handle, and a utility bar on the right with cart icon, search icon, and account icon. When the header becomes sticky, it should shrink in height from [INITIAL_HEIGHT] to [STICKY_HEIGHT] pixels with a smooth CSS transition of [TRANSITION_SPEED] milliseconds. Include settings for background color [HEADER_BG_COLOR], sticky background color [STICKY_BG_COLOR], text color [TEXT_COLOR], and a toggle to enable or disable a bottom border shadow when sticky. The header should add a CSS class [STICKY_CLASS] to the header element when in sticky mode. On mobile viewports below [MOBILE_BREAKPOINT] pixels, replace the navigation with a hamburger menu icon that opens a slide-out drawer from the [DRAWER_DIRECTION] side. Include an optional announcement bar slot above the header that hides when scrolling down and reappears when scrolling up. Provide the complete Liquid section file with schema, CSS, and JavaScript.

Where to paste this: In Shopify admin, go to Online Store > Themes > Edit code, create a new file at sections/sticky-header.liquid, and paste in the generated Liquid, CSS, and JavaScript. Then open the theme customizer (Online Store > Themes > Customize), remove or disable your current header section, and add this new sticky header section in its place — most themes let you swap the header via the Header group at the top of the section list.