Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

zebra_pin

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

zebra_pin - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

examples/favicon.ico
LICENSE.md

8

CHANGELOG.md

@@ -0,1 +1,9 @@

## version 2.0.0 (July 23, 2018)
- pinned elements are not taken out of DOM when becoming pinned; instead, an invisible clone element is created so that layout doesn't break.
- fixed bug where elements without explicit width would break when becoming pinned
- fixed bug where elements pinned to a container element would incorrectly fire the callback events
- completely rewritten examples
- added version number as a public property - useful to find out the version number even if all you have is the minified source code
## version 1.1.2 (May 30, 2017)

@@ -2,0 +10,0 @@

2

dist/zebra_pin.min.js

@@ -1,1 +0,1 @@

!function(t){"use strict";t.Zebra_Pin=function(s,n){var i={class_name:"Zebra_Pin",contain:!1,hard:!1,top_spacing:0,bottom_spacing:0,z_index:9999,onPin:null,onUnpin:null},o=this,e=(Math.random()+1).toString(36).substring(2,7),a=t(window);o.settings={};o.update=function(){s.each(function(s){void 0===t(this).data("Zebra_Pin_Position")?t(this).data("Zebra_Pin_Position",t(this).css("position")):t(this).css("position",t(this).data("Zebra_Pin_Position"));var n,i,p,g,c=t(this),l=c.offset(),_=c.position(),f=c.outerHeight(),r=parseInt(c.css("marginLeft"),10)||0,d=parseInt(c.css("marginTop"),10)||0;l.left-=r,l.top-=d,o.settings.contain&&(n=c.parent(),i=n.height(),p=n.offset()),o.settings.hard?c.css({position:"fixed",left:l.left,top:l.top,zIndex:o.settings.z_index}).addClass(o.settings.class_name):(c.css({zIndex:o.settings.z_index}).removeClass(o.settings.class_name),g=".Zebra_Pin_"+e+"_"+s,a.off("scroll"+g).on("scroll"+g,function(){var t=a.scrollTop();t>=l.top-o.settings.top_spacing&&(!o.settings.contain||t<=p.top+i-o.settings.top_spacing-f-o.settings.bottom_spacing)&&"fixed"!==c.css("position")?(c.css({position:"fixed",left:l.left,top:o.settings.top_spacing}).addClass(o.settings.class_name),o.settings.onPin&&"function"==typeof o.settings.onPin&&o.settings.onPin(l.top-o.settings.top_spacing,c,s)):t<l.top-o.settings.top_spacing&&"absolute"!==c.css("position")?(c.css({position:"absolute",left:_.left,top:_.top}).removeClass(o.settings.class_name),o.settings.onUnpin&&"function"==typeof o.settings.onUnpin&&o.settings.onUnpin(l.top-o.settings.top_spacing,c,s)):o.settings.contain&&t>=p.top+i-o.settings.top_spacing-f-o.settings.bottom_spacing&&"absolute"!==c.css("position")&&(c.css({position:"absolute",left:_.left,top:i-f-o.settings.bottom_spacing-o.settings.bottom_spacing}).removeClass(o.settings.class_name),o.settings.onUnpin&&"function"==typeof o.settings.onUnpin&&o.settings.onUnpin(p.top+i-f-o.settings.bottom_spacing,c,s))}),a.trigger("scroll"+g))})},function(){o.settings=t.extend({},i,n),o.update(),a.on("resize",function(){o.update()})}()}}(jQuery);
!function(C){"use strict";C.Zebra_Pin=function(t,s){var n={class_name:"Zebra_Pin",contain:!(this.version="2.0.0"),hard:!1,top_spacing:0,bottom_spacing:0,z_index:1e3,onPin:null,onUnpin:null},c=this,d=(Math.random()+1).toString(36).substring(2,7),f=C(window);c.update=function(){t.each(function(s){var n=C(this);C(this).hasClass(c.settings.class_name)&&(n.attr("style",n.data("ztt_previous_style")||"").removeClass(c.settings.class_name).removeClass("Zebra_Pin_Contained"),n.next(".Zebra_Pin_Clone").remove());var t,e,i,a,o=n.offset(),l=n.position(),g=n.outerHeight(),_=n.outerWidth(),p=parseInt(n.css("marginLeft"),10)||0,r=parseInt(n.css("marginTop"),10)||0;o.left-=p,o.top-=r,c.settings.contain&&(t=n.parent(),e=t.height(),i=t.offset()),c.settings.hard?n.css({position:"fixed",left:o.left,top:o.top,width:_,zIndex:c.settings.z_index}).addClass(c.settings.class_name):(a=".Zebra_Pin_"+d+"_"+s,f.off("scroll"+a).on("scroll"+a,function(){var t=f.scrollTop();t>=o.top-c.settings.top_spacing&&(!c.settings.contain||t<=i.top+e-c.settings.top_spacing-g-c.settings.bottom_spacing)&&(!n.hasClass(c.settings.class_name)||n.hasClass("Zebra_Pin_Contained"))?(n.hasClass("Zebra_Pin_Contained")?n.removeClass("Zebra_Pin_Contained"):(n.clone().addClass("Zebra_Pin_Clone").insertAfter(n).css("visibility","hidden"),n.data("ztt_previous_style",n.attr("style")).addClass(c.settings.class_name),c.settings.onPin&&"function"==typeof c.settings.onPin&&c.settings.onPin(o.top-c.settings.top_spacing,n,s)),n.css({position:"fixed",left:o.left,top:c.settings.top_spacing,width:_,zIndex:c.settings.z_index})):t<o.top-c.settings.top_spacing&&n.hasClass(c.settings.class_name)?(n.next(".Zebra_Pin_Clone").remove(),n.attr("style",n.data("ztt_previous_style")||"").removeClass(c.settings.class_name),c.settings.onUnpin&&"function"==typeof c.settings.onUnpin&&c.settings.onUnpin(o.top-c.settings.top_spacing,n,s)):c.settings.contain&&t>=i.top+e-c.settings.top_spacing-g-c.settings.bottom_spacing&&!n.hasClass("Zebra_Pin_Contained")&&(n.hasClass(c.settings.class_name)||(n.clone().addClass("Zebra_Pin_Clone").insertAfter(n).css("visibility","hidden"),n.data("ztt_previous_style",n.attr("style")).addClass(c.settings.class_name),c.settings.onPin&&"function"==typeof c.settings.onPin&&c.settings.onPin(o.top-c.settings.top_spacing,n,s)),n.css({position:"absolute",left:l.left,top:e-g-c.settings.bottom_spacing-c.settings.bottom_spacing}).addClass("Zebra_Pin_Contained"))}),f.trigger("scroll"+a))})},c.settings={},c.settings=C.extend({},n,s),c.update(),f.on("resize",function(){c.update()})}}(jQuery);

269

dist/zebra_pin.src.js
/**
* Zebra_Pin
*
* Zebra_Pin is a lightweight (2KB minified, ~800 bytes gzipped) and adaptive (things work as expected when the browser
* 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
* stay visible even if the user scrolls the page. This type of elements are also referred to as "fixed position elements"
* or "sticky 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".
*

@@ -13,18 +13,15 @@ * Use it to create sticky sidebars, sticky navigation, sticky headers and footers, or anything else you feel the need

* You can have "hard" pinned elements - elements are pinned to their initial position and stay there, elements that
* become pinned only when the user scrolls to them, pinned elements that move only inside their parent element.
* become pinned when they are about to be scrolled out of view, as well as pinned elements that can move only inside
* their parent element's boundaries.
*
* When elements become pinned a CSS class will be added to them, as specified by the plugin's "class_name" property.
* Pinned elements are added a user-defined CSS class so you can adjust their looks when pinned. Additionally, custom
* events are fired when elements become pinned/unpinned giving you even more power for customizing the result.
*
* Also, custom events are fired when elements are pinned/unpinned giving you even more power for customizing the result.
* Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 7+
*
* Note that this plugin will alter the target element(s) "position" property to "absolute" and/or "fixed", depending
* on the situation, so, before enabling the plugin, make sure that this will not affect your page's layout.
* Read more {@link https://github.com/stefangabos/Zebra_Pin/ here}
*
* Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 7+)
*
* Read more {@link https://github.com/stefangabos/Zebra_Tooltips/ here}
*
* @author Stefan Gabos <contact@stefangabos.ro>
* @version 1.1.2 (last revision: May 30, 2017)
* @copyright (c) 2013 - 2017 Stefan Gabos
* @version 2.0.0 (last revision: July 20, 2018)
* @copyright (c) 2013 - 2018 Stefan Gabos
* @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU LESSER GENERAL PUBLIC LICENSE

@@ -39,5 +36,8 @@ * @package Zebra_Pin

// so you can tell the version number even if all you have is the minified source
this.version = '2.0.0';
var defaults = {
// class to add to the element when it is "sticky"
// class to add to the element when it is becomes pinned
class_name: 'Zebra_Pin',

@@ -50,4 +50,4 @@

// specifies whether the element should be "hard" pinned (the element is pinned to its position from
// the beginning), or become pinned only when it is about to be hidden.
// specifies whether the element should be "hard" pinned (pinned to its position from the beginning), or
// become pinned only when it is about to go out of view.
//

@@ -57,3 +57,4 @@ // default is FALSE

// margin, in pixels, from the container element's (or the browser window's) top
// distance, in pixels, from the browser window's top (or the container element's top, when element is
// contained to its parent element's boundaries) from which the element should become pinned.
// this only works if the "hard" property is set to FALSE.

@@ -64,4 +65,5 @@ //

// margin, in pixels, from the container element's bottom
// this only works if the "hard" property is set to FALSE and it is used only if the "contain" property is TRUE
// distance, in pixels, from the containing parent element's bottom which the pinned element must not
// exceed.
// this only works if the "hard" property is set to FALSE and the "contain" property is set to TRUE
//

@@ -72,6 +74,6 @@ // default is 0

// the value of zIndex CSS property to be set for pinned elements
// default is 9999
z_index: 9999,
// default is 1000
z_index: 1000,
// callback function to be executed when an element is pinned
// callback function to be executed when an element becomes pinned
// the callback function receives 3 arguments:

@@ -83,3 +85,3 @@ // - the vertical position, relative to the document, where the event occurred

// callback function to be executed when an element is unpinned
// callback function to be executed when an element becomes unpinned (reverts to its original state)
// the callback function receives 3 arguments:

@@ -93,2 +95,3 @@ // - the vertical position, relative to the document, where the event occurred

// to avoid confusions, we use "plugin" to reference the current instance of the object
plugin = this,

@@ -99,30 +102,29 @@

$window = $(window);
// reference to the window element
$window = $(window),
plugin.settings = {};
/**
* Constructor method. Initializes the plugin.
*
* @return void
*/
_init = function() {
/**
* Constructor method. Initializes the plugin.
*
* @return void
*/
var _init = function() {
// the plugin's final properties are the merged default and
// user-provided options (if any)
plugin.settings = $.extend({}, defaults, options);
// the plugin's final properties are the merged default and
// user-provided options (if any)
plugin.settings = $.extend({}, defaults, options);
// update elements' position
plugin.update();
// update elements' position
plugin.update();
// on window resize
$window.on('resize', function() {
// on window resize
$window.on('resize', function() {
// update elements' position
plugin.update();
// update elements' position
plugin.update();
});
});
};
};
/**

@@ -154,24 +156,22 @@ * Updates the pinned elements' positions in accordance with the scrolled amount and with the pinned elements'

// if we haven't yet saved the element's original "position" value
if (undefined === $(this).data('Zebra_Pin_Position'))
// reference to the current element
var $element = $(this);
// store it now
$(this).data('Zebra_Pin_Position', $(this).css('position'));
// if the element is already pinned
if ($(this).hasClass(plugin.settings.class_name)) {
// if we have already saved the element's original "position" value
else
// reset the element's default properties
$element.attr('style', $element.data('ztt_previous_style') || '').removeClass(plugin.settings.class_name).removeClass('Zebra_Pin_Contained');
// set the element's "position" property to its original state (in case it was modified)
// so we get the correct values in the next section
$(this).css('position', $(this).data('Zebra_Pin_Position'));
// remove the clone element, if it exists
$element.next('.Zebra_Pin_Clone').remove();
}
var
// reference to the current element
$element = $(this),
// get the element's position relative to the document
offset = $element.offset(),
// get the element's position relative to the offset parent
// get the element's position relative to the parent element
position = $element.position(),

@@ -182,2 +182,5 @@

// get the element's width, including padding and border
width = $element.outerWidth(),
// get margins, if any; we need this because position() takes margins into account while offset()

@@ -198,3 +201,3 @@ // doesn't and so we need to compensate

// if pinned element needs to be contained inside the parent element's boundaries
// if element needs to be contained inside the parent element's boundaries
if (plugin.settings.contain) {

@@ -222,2 +225,3 @@

top: offset.top,
width: width,
zIndex: plugin.settings.z_index

@@ -231,11 +235,3 @@

// set element's default properties
$element.css({
zIndex: plugin.settings.z_index
// remove the class indicating that the element is pinned
}).removeClass(plugin.settings.class_name);
// we generate a unique name for each element of each instance of the plugin
// we generate a unique namespace for each element of each instance of the plugin
// we do this so that we can easily unbind them without affecting other elements

@@ -245,8 +241,5 @@ // and instances of the plugin

// unbind a previously set callback function (if any)
$window.off('scroll' + proxy)
// unbind a previously set handler and attach a new one
$window.off('scroll' + proxy).on('scroll' + proxy, function() {
// when the page is scrolled
.on('scroll' + proxy, function() {
// get scrolled amount

@@ -258,53 +251,81 @@ var scroll = $window.scrollTop();

// if the user scrolled to the element (minus "top_spacing")
// the user scrolled past the element's top (minus "top_spacing")
scroll >= offset.top - plugin.settings.top_spacing &&
// the element has no parent, or the element needs to be contained inside its parent's boundaries
// and the element is currently inside its parent's boundaries
(!plugin.settings.contain || (scroll <= container_offset.top + container_height - plugin.settings.top_spacing - height - plugin.settings.bottom_spacing)) &&
// AND
(
// element's position is not already set to "fixed"
$element.css('position') !== 'fixed'
// the element is not "contained"
!plugin.settings.contain ||
// OR the element is contained but its bottom didn't reach the container's bottom
(scroll <= container_offset.top + container_height - plugin.settings.top_spacing - height - plugin.settings.bottom_spacing)
// AND
) && (
// the element does not have the class indicating that it is pinned
!$element.hasClass(plugin.settings.class_name) ||
// OR the element has the class indicating that it is pinned, but it also contains the
// "Zebra_Pin_Contained" meaning that the user is now scrolling upwards and that the
// element's bottom is *not* touching its container's bottom anymore
$element.hasClass('Zebra_Pin_Contained')
)
) {
// set element's CSS properties
$element.css({
// if element is *not* contained and at the bottom of its container
if (!$element.hasClass('Zebra_Pin_Contained')) {
position: 'fixed',
left: offset.left,
top: plugin.settings.top_spacing
// create a clone of the element, insert it right after the original element and make it invisible
// we do this so that we don't break the layout by removing the pinned element from the DOM
$element.clone().addClass('Zebra_Pin_Clone').insertAfter($element).css('visibility', 'hidden');
// add a class indicating that the element is pinned
}).addClass(plugin.settings.class_name);
// save the element's "style" attribute as we are going to modify it
// and add class indicating that the element is pinned
$element.data('ztt_previous_style', $element.attr('style')).addClass(plugin.settings.class_name);
// if a callback function exists for when pinning an element
if (plugin.settings.onPin && typeof plugin.settings.onPin === 'function')
// if a callback function exists for when pinning an element
if (plugin.settings.onPin && typeof plugin.settings.onPin === 'function')
// execute the callback function and pass as arguments the scrolled amount, the element
// the plugin is attached to, and the index of the element from the list of elements the
// plugin is attached to
plugin.settings.onPin(offset.top - plugin.settings.top_spacing, $element, index);
// execute the callback function and pass as arguments the scrolled amount, the element
// the plugin is attached to, and the index of the element from the list of elements the
// plugin is attached to
plugin.settings.onPin(offset.top - plugin.settings.top_spacing, $element, index);
// if the user is now scrolling upwards and a "contained" element's bottom is *not* touching
// its container's bottom anymore
} else
// remove this class
$element.removeClass('Zebra_Pin_Contained');
// set the element's CSS properties
$element.css({
position: 'fixed',
left: offset.left,
top: plugin.settings.top_spacing,
width: width,
zIndex: plugin.settings.z_index
});
// else if
} else if (
// the user has not scrolled to the element yet
// the user scrolled up past the element's top (minus "top_spacing")
scroll < offset.top - plugin.settings.top_spacing &&
// element's position is not already set to "absolute"
$element.css('position') !== 'absolute'
// and the element was pinned
$element.hasClass(plugin.settings.class_name)
) {
// set element's CSS properties
$element.css({
// remove the clone element
$element.next('.Zebra_Pin_Clone').remove();
position: 'absolute',
left: position.left,
top: position.top
// reset the element's original "style" attribute and remove the class indicating that the element is pinned
$element.attr('style', $element.data('ztt_previous_style') || '').removeClass(plugin.settings.class_name);
// remove the class indicating that the element is pinned
}).removeClass(plugin.settings.class_name);
// if a callback function exists for when unpinning an element

@@ -321,13 +342,35 @@ if (plugin.settings.onUnpin && typeof plugin.settings.onUnpin === 'function')

// the pinned element needs to be contained inside its parent's boundaries
// the element needs to be contained inside the parent element's boundaries
plugin.settings.contain &&
// the user scrolled past the container element's boundaries
// the user scrolled past the container element's bottom
scroll >= container_offset.top + container_height - plugin.settings.top_spacing - height - plugin.settings.bottom_spacing &&
// element's position is not already set to "absolute"
$element.css('position') !== 'absolute'
// the element is missing the class indicating that it reached the container element's bottom
!$element.hasClass('Zebra_Pin_Contained')
) {
// if we didn't have the chance to initialize the pin
// (when the page doesn't start at the top)
if (!$element.hasClass(plugin.settings.class_name)) {
// create a clone of the element, insert it right after the original element and make it invisible
// we do this so that we don't break the layout by removing the pinned element from the DOM
$element.clone().addClass('Zebra_Pin_Clone').insertAfter($element).css('visibility', 'hidden');
// save the element's "style" attribute as we are going to modify it
// and add class indicating that the element is pinned
$element.data('ztt_previous_style', $element.attr('style')).addClass(plugin.settings.class_name);
// if a callback function exists for when pinning an element
if (plugin.settings.onPin && typeof plugin.settings.onPin === 'function')
// execute the callback function and pass as arguments the scrolled amount, the element
// the plugin is attached to, and the index of the element from the list of elements the
// plugin is attached to
plugin.settings.onPin(offset.top - plugin.settings.top_spacing, $element, index);
}
// set element's CSS properties

@@ -340,13 +383,5 @@ $element.css({

// remove the class indicating that the element is pinned
}).removeClass(plugin.settings.class_name);
// add a class indicating that the element reached the container element's bottom
}).addClass('Zebra_Pin_Contained');
// if a callback function exists for when unpinning an element
if (plugin.settings.onUnpin && typeof plugin.settings.onUnpin === 'function')
// execute the callback function and pass as arguments the scrolled amount, the element
// the plugin is attached to, and the index of the element from the list of elements the
// plugin is attached to
plugin.settings.onUnpin(container_offset.top + container_height - height - plugin.settings.bottom_spacing, $element, index);
}

@@ -365,2 +400,4 @@

plugin.settings = {};
// off we go!

@@ -367,0 +404,0 @@ _init();

47

examples/examples.js
$(document).ready(function() {
// Pin #1
var pin = new $.Zebra_Pin($('#pin1'), {
top_spacing: 10,
// using a timeout because of the syntax highlighter which alters content
setTimeout(function() {
new $.Zebra_Pin($('.sticky-sidebar'), {
top_spacing: 10
});
new $.Zebra_Pin($('.sticky-navigation'), {
contain: true
}),
$container = $('.pin1-container'),
additional_height = -300;
});
$('button').on('click', function() {
additional_height = additional_height * -1;
$container.css('height', '+=' + additional_height);
pin.update();
});
new $.Zebra_Pin($('.sticky-navigation-highlight'), {
contain: true
});
// Pin #2
new $.Zebra_Pin($('#pin2'), {
top_spacing: 10
});
new $.Zebra_Pin($('.sticky-navigation-callbacks'), {
contain: true,
onPin: function(scroll, $element) {
$('li', $element).eq(2).addClass('hidden');
$('li', $element).eq(3).removeClass('hidden');
},
onUnpin: function(scroll, $element) {
$('li', $element).eq(2).removeClass('hidden');
$('li', $element).eq(3).addClass('hidden');
}
});
// Pin #3
new $.Zebra_Pin($('#pin3'), {
hard: true
});
new $.Zebra_Pin($('.sticky-navigation-nocallbacks'), {
contain: true
});
}, 500);
});

2

package.json
{
"name": "zebra_pin",
"version": "1.1.2",
"version": "2.0.0",
"main": "dist/zebra_pin.min.js",

@@ -5,0 +5,0 @@ "homepage": "https://github.com/stefangabos/Zebra_Pin",

109

README.md
<img src="https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png" alt="zebrajs" align="right">
# Zebra_Pin
# Zebra Pin &nbsp;[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Zebra%20Pin%20-%20a%20lightweight%20and%20adaptive%20jQuery%20plugin%20for%20pinning%20elements%20to%20the%20page%20or%20to%20container%20elementsurl=https://github.com/stefangabos/Zebra_Pin&via=stefangabos&hashtags=jquery,pin,sticky,pinned)
*A lightweight jQuery plugin for pinning any element to the page or to a container element*
*A lightweight jQuery plugin for pinning elements to the page or to container elements*
[![npm](https://img.shields.io/npm/v/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![Total](https://img.shields.io/npm/dt/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![Monthly](https://img.shields.io/npm/dm/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![License](https://img.shields.io/npm/l/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin)
[![npm](https://img.shields.io/npm/v/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![Total](https://img.shields.io/npm/dt/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![Monthly](https://img.shields.io/npm/dm/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![](https://data.jsdelivr.com/v1/package/npm/zebra_pin/badge?style=rounded)](https://www.jsdelivr.com/package/npm/zebra_pin) [![License](https://img.shields.io/npm/l/zebra_pin.svg)](https://github.com/stefangabos/Zebra_Pin/blob/master/LICENSE.md)
Zebra_Pin is a lightweight (2KB 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 the pinned elements stay visible even if the user scrolls the page. This type of elements are also referred to as *fixed position elements* or *sticky elements*.
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*.
Use it to create sticky sidebars, sticky navigation, sticky headers and footers, or anything else you feel the need to make it stick to the page while the user scrolls.
You can have *hard* pinned elements - elements are pinned to their initial position and stay there, elements that become pinned only when the user scrolls to them and pinned elements whose movement is restricted to their container element's size.
You can have "hard" pinned elements - elements are pinned to their initial position and stay there, elements that become pinned when they are about to be scrolled out of view, as well as pinned elements that can move only inside their parent element's boundaries.
When elements become pinned a CSS class will be added to them, as specified by the plugin's *class_name* property.
Pinned elements are added a user-defined CSS class so you can adjust their looks when pinned. Additionally, custom events are fired when elements become pinned/unpinned giving you even more power for customizing the result.
Also, custom events are fired when elements are pinned/unpinned giving you even more power for customizing the result.
Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 7+
Note that this plugin will alter the target element(s) "position" property to *absolute* and/or *fixed*, depending on the situation, so, before enabling the plugin, make sure that this will not affect your page's layout.
Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 7+)
## Support the development of this project
[![Donate](https://img.shields.io/badge/Be%20kind%20%7C%20Donate%20$3%20with%20-%20PayPal%20-brightgreen.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=K8HEUNMPV65R4)
## Features
- elements can be pinned inside a container element, not just to the page
- custom events are fired when pinning/unpinning elements for more control
- it is really small – it weights 2KB minified (~800 bytes gzipped) offering a very good ratio of features per used bytes
- pinned elements are added a user-defined CSS class so you can adjust their looks when pinned
- custom events are fired when elements become pinned/unpinned giving you even more power for customizing the result
- it is really small – it weights 2.5KB minified (~800 bytes gzipped) offering a very good ratio of features per used bytes
- it's cross-browser – works in every major browser and IE7+
## Demo
See the [demos](http://stefangabos.github.io/Zebra_Pin/)
## Requirements
Zebra_Pin has no dependencies other than jQuery 1.7+
Zebra Pin has no dependencies other than jQuery 1.7+
## Installation
Zebra_Pin is available as a [npm package](https://www.npmjs.com/package/zebra_pin). To install it use:
Zebra Pin is available as a [npm package](https://www.npmjs.com/package/zebra_pin). To install it use:
```bash
# the "--save" argument adds the plugin as a dependency in packages.json
npm install zebra_pin --save
```
npm install zebra_pin
```
Zebra_Pin is also available as a [Bower package](http://bower.io/). To install it use:
Zebra Pin is also available as a [Bower package](http://bower.io/). To install it use:
```bash
# the "--save" argument adds the plugin as a dependency in bower.json
bower install zebra_pin --save
```
bower install zebra_pin
```

@@ -57,7 +56,7 @@ ## How to use

```html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.2.1.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.3.1.js"><\/script>')</script>
```
Load the Zebra_Pin jQuery plugin:
Load the Zebra Pin jQuery plugin:

@@ -68,11 +67,14 @@ ```html

Alternatively, you can load Zebra_Pin from [JSDelivr CDN](https://www.jsdelivr.com/) like this:
```javascript
// for the most recent version
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Pin/dist/zebra_pin.min.js"></script>
Alternatively, you can load Zebra Pin from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_pin) like this:
// for a specific version
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Pin@1.1.1/dist/zebra_pin.min.js"></script>
```html
<!-- for the most recent version, not recommended in production -->
<script
src="https://cdn.jsdelivr.net/npm/zebra_pin@latest/dist/zebra_pin.min.js"></script>
// replacing "min" with "src" will serve you the non-compressed version
<!-- for a specific version -->
<script
src="https://cdn.jsdelivr.net/npm/zebra_pin@2.0.0/dist/zebra_pin.min.js"></script>
<!-- replacing "min" with "src" will serve you the non-compressed version -->
```

@@ -86,3 +88,3 @@

// easiest way to get started: when the user scrolls to the element
// the element will become pinned (sticky) and will scroll with the page
// the element will become pinned (sticky)
new $.Zebra_Pin($('#element'));

@@ -131,4 +133,4 @@

<td valign="top"><em>string</em></td>
<td valign="top">Zebra_Pin</td>
<td valign="top">Class to add to the element when it is "sticky"</td>
<td valign="top">"Zebra_Pin"</td>
<td valign="top">CSS class to be added to the element when it becomes pinned</td>
</tr>

@@ -138,7 +140,6 @@ <tr>

<td valign="top"><em>boolean</em></td>
<td valign="top">FALSE</td>
<td valign="top">false</td>
<td valign="top">
Specifies whether the pinned element should be restricted to its parent element's boundaries or not.<br><br>
<blockquote>The container element <strong>must</strong> have the <code>position</code> CSS property set to
something other than <strong>static</strong></blockquote>
<blockquote>The container element <strong>must</strong> have its <code>position</code> set to something other than the default <code>static</code></blockquote>
</td>

@@ -149,6 +150,6 @@ </tr>

<td valign="top"><em>boolean</em></td>
<td valign="top">FALSE</td>
<td valign="top">false</td>
<td valign="top">
Specifies whether the element should be "hard" pinned (the element is pinned to its position from the
beginning), or become pinned only when it is about to be hidden.
beginning), or become pinned only when it is about to go out of view.
</td>

@@ -161,4 +162,4 @@ </tr>

<td valign="top">
Margin, in pixels, from the container element's (or the browser window's) top.<br>
This only works if the "hard" property is set to FALSE.
Distance, in pixels, from the browser window's top (or the container element's top, when the element is contained to its parent element's boundaries) from which the element should become pinned.<br>
This only works if the <code>hard</code> property is set to <code>false</code>.
</td>

@@ -171,4 +172,4 @@ </tr>

<td valign="top">
Margin, in pixels, from the container element's bottom<br>
This only works if the "hard" property is set to FALSE and it is used only if the "contain" property is TRUE
Distance, in pixels, from the containing parent element's bottom which the pinned element must not exceed.<br>
This only works if the <code>hard</code> property is set to <code>false</code> and the <cpde>contain</code> property is set to <code>true</code>
</td>

@@ -179,3 +180,3 @@ </tr>

<td valign="top"><em>integer</em></td>
<td valign="top">9999</td>
<td valign="top">1000</td>
<td valign="top">

@@ -201,3 +202,3 @@ The value of zIndex CSS property to be set for pinned elements

<td valign="top">
Callback function to be executed when an element is pinned<br>
Callback function to be executed when an element becomes pinned<br>
The callback function receives 3 arguments:<br><br>

@@ -214,3 +215,3 @@ <ul>

<td valign="top">
Callback function to be executed when an element is unpinned<br>
Callback function to be executed when an element becomes unpinned (reverts to its original state)<br>
The callback function receives 3 arguments:<br><br>

@@ -250,4 +251,10 @@ <ul>

## Demo
## Support the development of this project
See the [demos](http://stefangabos.github.io/Zebra_Pin/)
[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=K8HEUNMPV65R4)
## Sponsors
Cross browser/device testing is done with
[![BrowserStack](https://github.com/stefangabos/Zebra_Dialog/raw/master/examples/browserstack.png)](https://www.browserstack.com/)
license.txt
examples/examples.css

Sorry, the diff of this file is not supported yet

examples/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc