Zebra Pin

a lightweight jQuery plugin for creating sticky elements pinned to the page or to a container element


Download View on GitHub

Zebra Pin is a lightweight (2.5KB minified, ~800 bytes gzipped) and adaptive (things work as expected when the browser window is resized) jQuery plugin for pinning elements to the page or to a container element, so that pinned elements remain visible when they are about to be scrolled out of view. This type of elements are also referred to as fixed position elements or sticky elements.

1. Sticky sidebar

A sticky sidebar is an element whose purpose it to help users navigate the various sections of a page by always staying pinned inside the viewport. The main difference between this and a sticky menu is that a sticky sidebar occupies an entire vertical section of a page, while a sticky menu may appear anywhere in the content and become sticky once the user scrolls to it. The menu of the left is a sticky sidebar. It will stay inside the viewport as you scroll down.

                    new Zebra_Tooltip($('.sticky-sidebar'), {

                        // we'll also add some top spacing so that the menu
                        // doesn't stay "glued" to the top
                        top_spacing: 15

                    });
                    

2. Sticky navigation

Sticky, or fixed, navigation is basically a website menu that is pinned into place so that it stays inside the viewport when the user scrolls down the page. Therefore, the menu is accessible from anywhere on the page without having to scroll up to it.


The HTML

                        
                        
                        

The CSS

                        .sticky-navigation {
                            background: #FFF;
                            padding: 1em 0;
                        }
                        
I don't really need to show you HTML or CSS as you can look into the files (or inspect) yourself, but I need content to be scrolled and these count as content and somehow feel more natural than lorem ipsum...

The JavaScript

                        new Zebra_Tooltip($('.sticky-navigation'));
                        

3. Pin elements to parent container

Pinned element's movement can be confined to the direct parent element's height. For this example we'll use the sticky menu that we created in the previous example and which was actually initialized with the contain property set to true.

                        new Zebra_Tooltip($('.sticky-navigation'), {
                            contain: true
                        });
                        
The sticky navigation that we created at the previous example is contained in a parent <div> that ends right after this notice. Therefore, after this point, the sticky menu will stop following you as you scroll down.

4. The pinning event

When elements become pinned a CSS class is added to the element. You can make use of this and alter the layout of the element when pinned. By default, the CSS class added is Zebra_Pin but it can be changed to anything else using the class_name property.

In the previous two examples you may have noticed that the sticky navigation does not really stand out as being a menu. Let's fix this using a little CSS.

The HTML

                        
                        
                        

The CSS

                        .sticky-navigation-highlight {
                            background: #FFF;
                            padding: 1em 0;
                        }

                        /* once pinned */
                        .sticky-navigation-highlight.Zebra_Pin {
                            border-bottom: 1px solid #ccc;
                            box-shadow: 0 12px 6px -6px rgba(0, 0, 0, .1);
                            transition: box-shadow .25s linear;
                        }
                        

The JavaScript

                        new Zebra_Tooltip($('.sticky-navigation-highlight'));
                        

5. Callbacks

Sometimes, you may want to perform actions that cannot be done using only CSS. For this example we'll do something that can easily be done through CSS but we'll overcomplicate it and make it using JavaScript in order to showcase how callbacks work.

Once we scroll to the sticky menu, we'll remove an option and add a new one and, instead of doing it with CSS, we'll use the plugin's onPin and onUnpin events.

The HTML

                        
                        
                        

The CSS

We'll use the the CSS from the previous example plus the following:

                        .sticky-navigation-callbacks li:nth-child(4) {
                            background: #c09853;
                        }

                        .sticky-navigation-callbacks li:nth-child(4) a {
                            color: #FFF;
                        }
                        

The JavaScript

                        new Zebra_Tooltip($('.sticky-navigation-callbacks'), {

                            // when pinning
                            onPin: function(scroll, $element) {

                                // cache selector
                                var items = $('li', $element);

                                // hide the 3rd menu item
                                // (eq is 0-based)
                                items
                                    .eq(2)
                                    .addClass('hidden');

                                // remove the "hidden" class
                                // from the 4th menu item
                                items
                                    .eq(3)
                                    .removeClass('hidden');

                            },

                            // when un-pinning
                            onUnpin: function(scroll, $element) {

                                // cache selector
                                var items = $('li', $element);

                                // remove the "hidden" class
                                // from the 3th menu item
                                // (eq is 0-based)
                                items
                                    .eq(2)
                                    .removeClass('hidden');

                                // hide the 4th menu item
                                items
                                    .eq(3)
                                    .addClass('hidden');

                            }

                        });
                        

5b. The pinning event (reprise)

Let's recreate the previous example using only CSS

The HTML

                    
                    
                    

The CSS

We'll use the the CSS from a previous example plus the following:

                    .sticky-navigation-nocallbacks.Zebra_Pin li:nth-child(3) {
                        display: none;
                    }

                    .sticky-navigation-nocallbacks li:nth-child(4) {
                        background: #c09853;
                        display: block !important;
                    }

                    .sticky-navigation-nocallbacks li:nth-child(4) a {
                        color: #FFF;
                    }
                    

The JavaScript

                    new Zebra_Tooltip($('.sticky-navigation-nocallbacks'));
                    

copyright © 2013 - 2018 stefan gabos