Press "Enter" to skip to content

How to Create a Sticky Scrolling with jQuery Plugin | Jquery.smartSticky

Jquery.smartSticky is a free and easy-to-use JavaScript library to switch between native and fixed position, due to limited support for Sticky Mode even in newer browsers.

sticky header on scroll jquery plugin, jquery sticky sidebar on scroll, hc sticky jquery floating sticky plugin, fixed div on scroll jquery example, jquery sticky header

Features

  • High visibility and customization of the item
  • Switch between the top and bottom position
  • Display the static element only within the container area
  • Executing callbacks and special positions
  • Internal surplus containers
  • Fixed head support in tables

Angular Directive To Make Things Sticky When The User Scrolls

How to make use of it:

1. To get began, embrace jQuery library and the goodSticky plugin’s information on the web page.

<!-- jQuery -->
<script src="/path/to/jquery.slim.min.js"></script>
<!-- smartSticky information -->
<script src="/path/to/dist/js/jquery.smartSticky.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/css/jquery.smartSticky.min.css" />

2. Just connect the perform goodSticky perform to the factor which must be sticky on web page scroll and down.

<div class="sticky-smart-demo">
  My Sticky Content
</div>
$('.sticky-smart-demo').smartSticky(
  // options here
);

3. Pin the factor on the backside of the web page and only present it when the web page scrolls up.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'bottom',
    scrolling: {
      up: true,
      down: false
    }
  }
});

4. Toggle the place of the sticky factor relying on the scroll class.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'toggle',
    scrolling: {
      up: true
    }
  }
});

5. Override the default delay time in ms.

$('.sticky-smart-demo').smartSticky({
  show: {
    delay: 400
  }
});

6. Stretch the factor to the total width when getting caught.

$('.sticky-smart-demo').smartSticky({
  container: function (manager) 
    return manager.elem.closest('.row');
  
});

7. Make the factor sticky above the unique place.

$('.sticky-smart-demo').smartSticky({
  show: {
    original: {
      above: true
    }
  }
});

8. Customize the CSS types relying on the present Sticky state.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'bottom',
    scrolling: function (manager, scrollingBottom) {
      if (scrollingBottom) 
      else 
      return true;
    }
}
}).on('smartSticky.deactivate', function () 
  $(this).css('color', 'black');
);

9. All default customization choices.

$('.sticky-smart-demo').smartSticky({
  show: {
    delay: 50,
    immediately: false,
    original: ,
    fixed: 'top',
    scrolling: {
      up: false,
      down: true
    }
  },
  container: null,
  css: {
    classes: 
      placeholder: 'sticky-smart-placeholder',
      root: 'sticky-smart',
      invisible: 'sticky-smart-invisible',
      active: 'sticky-smart-active',
      background: 'sticky-smart-background',
      container: 'sticky-smart-container'
    ,
    fixed: {
      width: false,
      left: false
    }
  }
});

10. Make the factor mounted on the backside solely on cell gadgets (display size < 768px).

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: function () {
      if ($(window).width() < 768) 
        return 'bottom';
      
    },
    scrolling: function (manager, scrollingBottom) {
      if ($(window).width() < 768) {
        return !scrollingBottom;
      }
      return scrollingBottom;
    }
  }
});

11. Enable & disable the plugin programmatically.

instance.smartSticky('disable');
instance.smartSticky('enable')

12. Update the choices.

instance.smartSticky('setOptions', 
  // choices here
);

13. Hide the sticky factor.

instance.smartSticky('hide');

14. Event handlers.

$('.sticky-smart-demo').smartSticky(
  // choices here
).on('smartSticky.activate', function () 
  // do one thing
).on('smartSticky.deactivate', function () 
  // do one thing
).on('smartSticky.activated', function () 
  // do one thing
).on('smartSticky.deactivated', function () 
  // do one thing
).on('smartSticky.init', function () 
  // do one thing
);

Sticky Header on Scroll jQuery, Highly Customizable Sticky jQuery Plugin, Sticky div on ScrollOn Scroll Sticky div, jquery sticky js, jquery pin element on scroll


See Demo And Download

Official Website(oplaner4): Click Here

This superior jQuery/javascript plugin is developed by oplaner4. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.