Barra lateral Sticky de alto rendimiento en JavaScript puro

Vista prévia

Descripción

Esta es la versión de JavaScript Vanilla del < a href = "http://www.jqueryscript.net/other/Performant-Sticky-Sidebar-Plugin-jQuery.html" target = "_ blank" rel = "noopener noreferrer" > adhesivo-barra lateral plugin que proporciona el Smart, barras laterales pegajosas de alto rendimiento para sus sitios web entre navegadores.

Get it from NPM:

$ npm install sticky-sidebar

Funcionamiento

Incluya el < a href = "https://gist.github.com/paulirish/1579671" target = "_ blank" rel = "noopener noreferrer" > requestAnimationFrame polyfill para navegadores heredados (opcional):

<script src="rAF.js"></script>

Incluya el < a href = "https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js" target = "_ blank" rel = "noopener noreferrer" > ResizeSensor. js para detectar cuando se cambia la barra lateral o el contenedor (opcional):

<script src="ResizeSensor.js"></script>

Incluya el archivo JavaScript principal ' Sticky-Sidebar. js ' justo antes de la etiqueta body de cierre.

<script src="sticky-sidebar.js"></script>

Cree una barra lateral dentro del contenedor de la siguiente manera:

<div class="container">

<div id="sidebar">


<div class="sidebar__inner">



<p>This is sticky column</p>


</div>

</div>

<div id="content">


main content here

</div>


</div>

Haga que la barra lateral se solucione dentro del contenedor mientras se desplaza hacia abajo por la Página Web.

new StickySidebar('#sidebar', {


containerSelector: '.container',


innerWrapperSelector: '.sidebar__inner'
});

Todas las opciones de configuración predeterminadas.

/**
 * Additional top spacing of the element when it becomes sticky.
 * @type {Numeric|Function}
 */
topSpacing: 0,

/**
 * Additional bottom spacing of the element when it becomes sticky.
 * @type {Numeric|Function}
 */
bottomSpacing: 0,

/**
 * Container sidebar selector to know what the beginning and end of sticky element.
 * @type {String|False}
 */
containerSelector: false,

/**
 * Inner wrapper selector.
 * @type {String}
 */
innerWrapperSelector: '.inner-wrapper-sticky',

/**
 * The name of CSS class to apply to elements when they have become stuck.
 * @type {String|False}
 */
stickyClass: 'is-affixed',

/**
 * Detect when sidebar and its container change height so re-calculate their dimensions.
 * @type {Boolean}
 */
resizeSensor: true,

/**
 * The sidebar returns to its normal position if its width below this value.
 * @type {Numeric}
 */
minWidth: false

Controladores de eventos.

instance.addEventListener('initialized.stickyBar', function(){

 // after the sticky sidebar plugin has been initialized
});

instance.addEventListener('affix.top.stickyBar', function(){

 // before the element has been affixed top of viewport
});

instance.addEventListener('affixed.top.stickyBar', function(){

 // after the element has been affixed top of viewport
});

instance.addEventListener('affix.bottom.stickyBar', function(){

 // before the element has been affixed bottom of viewport
});

instance.addEventListener('affixed.bottom.stickyBar', function(){

 // after the element has been affixed bottom of viewport
});

instance.addEventListener('affix.container-bottom.stickyBar', function(){

 // before the element has been affixed bottom of container
});

instance.addEventListener('affixed.container-bottom.stickyBar', function(){

 // after the element has been affixed bottom of container
});

instance.addEventListener('affix.unbottom.stickyBar', function(){

 // before the element is no longer bottomed out
});

instance.addEventListener('affixed.unbottom.stickyBar', function(){

 // after the element is no longer bottomed out
});

instance.addEventListener('affix.static.stickyBar', function(){

 // before the element has been returned to its position
});

instance.addEventListener('affixed.static.stickyBar', function(){

 // after the element has been returned to its position
});

Registro de cambios

07/13/2018

• actualizar