Checks if sticky element has reached bottom of its wrapper, and makes it stick to the bottom instead of overflowing.

The caveat is that the script checks on every scroll event if this condition happens and then always applies css styles to the element.

It's not the most elegant solution but it works, and at least is a good start.

Solves #164, #127 and maybe #106.

If you use this on a fluid layout, the size then needs to be updated based on the window size. If the content is dynamic and newly loaded content changed the document height, then again the size might be invalid.

Commit message:

Stop $.extend overwriting defaults object.

When using $.extend, the first argument object is altered, and since objects are copied by reference in Javascript that means the defaults object gets changed when it shouldn't and subsequent calls to $().sticky() will use previous options rather than fresh defaults.

More info:

var defaults = {
  // defaults set in jquery.sticky.js
  topSpacing: 0,
  bottomSpacing: 0,
  className: 'is-sticky',
  wrapperClassName: 'sticky-wrapper',
  center: false,
  getWidthFrom: ''
};
console.log(defaults.center);
// false
var options = {
  // options passed in to $(element).sticky()
  center: true
};
$.extend(defaults, options)
console.log(defaults.center);
// true
// Subsequent sticky calls will be centered.

UMD wrapper allows it to require the jquery dep from a module system if it exists. Taken from here https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js

Hello,

• start event is now triggered only once when the real start begins. It was flooding when bottom limit is reached and the top css property have to be updated to push up the sticked element.
• To keep the event triggering when top is updated after start, the update event have been added. So it floods like start did before.
• bottom-reached is triggered when sticked element reached the bottom space limit
• bottom-unreached is triggered when sticked element is not reaching the bottom space limit

Hope you will find this usefull...

Hi @garand ,

I'm trying to use this plugin but once the plugin is instantiated the stickiness does not work. All the buttons just play around.

Please help

It currently isn't possible to specify a version of sticky to use because there are no tags on the git repository. Can you tag the current version (1.0.1) so that users can specify a version to lock to? (Some Bower tools can't use libraries that don't have tagged versions.)

Hi! This plugin has saved me countless hours! :cookie: :smile:

But I want to give some sticky elements on my page some common styles, so I set the plugin's className option to something common to these two elements, e.g. sticky-top-bar and style it.

The sticky wrapper plugin however, does apply this class both to the wrapper (.sticky-wrapper) and to the sticky element. So when the element is sticked, then the styles are applied to both elements, which looks weird.

My suggestion would be to omit the className from the wrapper, but I don't now which technical decision was behind this.

So we're using sticky for a bunch of navigational items, that may or may not have margins on the top or bottom (typically the bottom).

The library doesn't take this margin into account when determining the height, and so text gets bumped around when it gets activated. Not cool... We can remove those margins, but then that means we have to add those margins to other things, and it just feels like a bit of a hack.

Is there a better way I'm missing, or should I create a PR?

Example: https://jsfiddle.net/heathdutton/85k7g8vt/5/

I made some improvements to stiky so that it could work in some of my projects. I didn't change any of the old functionality.

The new option .widthFromWrapper enables me to handle width of the wrapper with pure CSS and sticky just adjusts it's width accordingly, without any extra coding.

The bower package is currently unable to install as your git repo is missing tags for released versions. In the interim I've worked around it by forking your project, but it would obviously be better for your users if your version worked :)

I tried to use bottomSpacing: 0 , but the element stays on top.

Here is my code, I used the example html:

<!doctype html>
<html>
<head>
  <title>Sticky Plugin</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.sticky.js"></script>
  <script>
    
    $(window).load(function(){
      $("#header").sticky({ topSpacing:0,
                           bottomSpacing:0
                          });
    });
    
    $(window).scroll(function(){
      position = $(".dickydick").offset().top -$("#header").height();
      if ($(window).scrollTop() > position) $("#header").unstick();
      else $("#header").sticky();
    });
  </script>
  <style>
    body {
      height: 10000px;
      padding: 0;
      margin: 0;
    }

    #header {
      background: #bada55;
      color: white;
      font-family: Droid Sans;
      font-size: 18px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      text-shadow: 0 1px 1px rgba(0,0,0,.2);
      width:100%;
      box-sizing:border-box;
    }
  </style>
</head>
<body>
  <div class="header-sticky-wrapper" style="">
  <p>This is test this is text this is text at the top.</p>
  <div id="header">
    <p>This is the sticky thingy that is really cool.</p>
  </div>
  <p style="margin-top:200vh">This is test this is text this is text at the bottom.</p>
    </div>
  <div class="blockdiv">
    
  </div>
</body>
</html>

I used this plugin with jquery 3.3.1. but once I update to jquery 3.4.1 Its not working anymore. I had to downgrade jquery version back to 3.3.1.

change logs after 3.3.1:

• https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/
• https://blog.jquery.com/2019/05/01/jquery-3-4-1-triggering-focus-events-in-ie-and-finding-root-elements-in-ios-10/

This plugin works well, but it it possible to return a sticky element to its original scrollable state after unstick is called? When I do this, the div just seems to disappear, and I need it to just naturally scroll up with the rest of the content

In our use case, we have a webshop sidebar filters which can expand and be quite long height-wise. I extended your library so it has a config key "scrollStickyElement", which syncs scrolling of sticky element with main page. Should you find this snippet useful, you can merge, otherwise close the request.