Press "Enter" to skip to content

Lightweight JQuery plugin for StickyScroll | Proper stickyBar

Proper stickyBar is Sticky is a jQuery plugin that gives you the ability to always make any element on your page visible. Lightweight and easy to use. No need for external dependencies (besides jQuery).

StickyBar is a highly customizable jQuery Sticky plugin useful for developers who want to keep site navigation or sidebar tools constant when scrolling the page. The plugin uses the scroll event in the window to discover the position of your elements and applies to the position of your CSS: a static property on it as soon as you scroll it into view.

position sticky not working with overflow scroll, position sticky vs fixed, position sticky not working inside div, sticky div on scroll css, position sticky relative to parent

Options:

All options are optional.

  • parentElementClass: (default: parentElementClass). Set this to hover borders. Your item will scroll to its height
  • wrapppClass: (default: “glued”). The default wrapping class for the element
    activeStickyClass: (Default: “Sticky”). The default category that becomes active when the item is pasted
  • activeBottomClass: (Default: “is-bottom”). The default class that becomes active when sticky touches the bottom of the asset
  • top: (Default: 0). Offset from the top of the window
  • Width: (Default: Item Width). Only check this if you want to override the item’s width
  • DisableOnMobile: (Default: True). Disable sticky on a mobile phone. The default is True = 992 pixels. If you do not want to disable it on the mobile phone, specify an error, or if you want a different breakpoint, specify it (number in pixels)

How to make use of it:

1. Download the plugin and place the properStickyBar.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/properStickyBar.js"></script>

2. Call the function on the element to make it sticky inside its parent container.

$(function(){
  var stickyInstance = new stickySideBar($('nav'));
});

3. You may also specify the container inside which the factor needs to be fixed.

var stickyInstance = new stickySideBar($('nav'),{
    parentElementClass: '.section'
});

4. Override the default CSS classes when the element is sticky.

var stickyInstance = new stickySideBar($('nav'),{

    // default wrapping class
    wrappClass: 'sticked',

    // default active class
    activeStickyClass: 'is-sticked'

});

5. Override the CSS class of the sticky factor when it reaches the underside of the container.

var stickyInstance = new stickySideBar($('nav'),{
    activeBottomClass: 'is-bottom'
});

6. Set the width of the factor when getting stuck.

var stickyInstance = new stickySideBar($('nav'),{
    width: '600'
});

7. Set the top offset of the sticky component.

var stickyInstance = new stickySideBar($('nav'),{
    top: 70
});

8. Determine whether or not to disable the plugin on mobile.

var stickyInstance = new stickySideBar($('nav'),{
    disableOnMobile: false
});

9. API strategies.

// update
stickyInstance.updateSticky();

// destroy
stickyInstance.destroy();

Stick Elements To The Top Of Their Container, Proper stickyBar Plugin/Github, css position sticky bottom, css sticky header, position sticky horizontal scroll


See Demo And Download

Official Website(markoarthofer22): Click Here

This superior jQuery/javascript plugin is developed by markoarthofer22. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *