jquery.sticky viscous rolling plug-in uses

A jQuery plugin that enables you to make any element on your page always visible, it can display the plug as a top fixed navigation.

Official website address: http://stickyjs.com/

github：https://github.com/garand/sticky

 

Plugin depends on jq core libraries need to introduce!

The blog navigation stationary use this plug-in

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

Unbundling sticky

<script>
  $("#sticker").unstick();
</script>

Options

• topSpacing: (Default:  0) pixels between the top and the top of the page elements.
• bottomSpacing: (Default:  0) pixels between the bottom of the page and the bottom of the elements.
• className:: (Default  'is-sticky'added to the CSS class wrapper element when "Paste").
• wrapperClassName: (Default:  'sticky-wrapper') CSS class to the wrapper.
• center: (Default:  false) for determining whether an element should be centered in the viscosity level of the page.
• getWidthFrom: (Default:  '') referenced by the selector element, for setting the "sticky" element fixed width.
• widthFromWrapper: (Default:  true)  Boolean value that determines whether it should update the width "sticky" element to match the width of the wrapper. Packaging is stationary (static elements not included) placeholder fixing element, its width depending on the context and CSS rules. Only getWidthFormeffective when not provided.
• responsiveWidth: (Default:  false) Boolean value that determines whether the window is resized (using getWidthfrom) recalculating the widths
• zIndex: (Default:  inherit) z-index control elements pasted

Events

• sticky-start: When the element becomes sticky.
• sticky-endWhen the element is returned to its original position:
• sticky-update: When pasting elements, but because of constraints reason must be updated location
• sticky-bottom-reachedWhen the element reaches the bottom space restrictions:
• sticky-bottom-unreached: When the element does not reach the bottom of the space limit

<script>
  $('#sticker').on('sticky-start', function() { console.log("Started"); });
  $('#sticker').on('sticky-end', function() { console.log("Ended"); });
  $('#sticker').on('sticky-update', function() { console.log("Update"); });
  $('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
  $('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });
</script>