a lightweight jQuery plugin for creating sticky elements pinned to the page or to a container element
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.
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
});
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'));
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.
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'));
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($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($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');
}
});
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 - stefan gabos