unpotatoes

That was really useful. You inspired me to look into uturn (from New York Times and recommended in another post by @mikel), and now I have a much higher performance solution. Thanks, @elegantseagulls!

The effect I'm trying to build is a header that hides when you scroll down and shows when you scroll up. It should also dock in its original position (indicated by a pink bar in my demo) when you scroll all the way to the top. The show/hide effect is working great. However, I'm having two problems: When I scroll to the top, the docking only works well when I scroll very slowly. Otherwise there is a lag, and the header pops into position instead of scrolling with the page. When I scroll down from the very top, there is a moment when the header pops into frame and then tweens back into its expected position. Grateful for any assistance!

I was able to get your solution into my code. Thanks again!

Cassie, this looks fantastic! I'm going to try integrating your solution into my code. Thanks so much!

Thanks so much, Cassie. I appreciate it. I'm a bit confused about one thing. My goal is to get the carousel to be draggable but also to move by swiping on a trackpad. At least for me, I can't get the carousel in your demo to move via my trackpad (i.e., two-finger swipe on my Mac laptop). Any thoughts?

I'm trying to replicate the behavior of Google ads carousels that allow both dragging and swiping with a track pad. At first, this demo appears to work, but I quickly ran into problems. For example, if you drag the carousel a little bit to the left, and then switch to using the trackpad to swipe the rest of the way to the left, and you'll see that you can now swipe past the end of the carousel content. The bounds are no longer respected, and you'll see the pink background of the wrapper div, which should be impossible. Grateful for any suggestions. Thanks!