Method 1: CSS3
CSS3 introduced position: sticky; which is a hybrid of relative and fixed positioning. Under Mozilla Developer Network’s documentation, they explain that the “element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned."
For instance, #one { position: sticky; top: 10px; } will behave just like a relatively positioned element, until the viewport scrolls such that the element would be less than 10px from the top. Then, it will be fixed to 10px from the top until the viewport is scrolled back past this threshold.”
Here’s a working Codepen example that shows this technique in action: (Don’t see the sticky functionality below? Try using Safari instead of Chrome)
See the Pen Sticky positioning by Shopify Partners (@ShopifyPartners) on CodePen.
It’s important to note that while this is easy to implement through CSS, it’s not supported on all major browsers (including Chrome, believe it or not). Can I Use provides us with the following support chart for position: sticky;.
you would like to use position: sticky; but need to support other browsers, check out this CSS polyfill by Filament Group.
Method 2: jQuery Plugin
One thing is certain, we want our sticky ‘add to cart’ panel to work on all modern browsers, because we want all of our clients’ customers to have the same quality shopping experience. To do this, we can use a cross-platform jQuery Plugin. There are many jQuery plugins that perform the same functionality such as Sticky-kit and Waypoints, but for this example I will use Sticky.
If you’re new to front-end development, jQuery plugins are resources you should take advantage of. For the most part, this is because they are relatively easy to implement and can provide you with quality functionality. To add sticky elements to our product pages, we will need to include jQuery and Sticky, and call Sticky to our ‘add-to-cart’ panel: