32 | 33 |

Stick Em Up! .js

34 |

35 |

Flexible, simple, sticky stuff

36 |

I created Stick Em Up so I could have a flexible and easy way to set fixed positioning on elements based on where visitors are scrolling on webpages.

37 | 38 | 39 |

40 |

Quick Start Guide

41 | 42 |

Getting started is easy, no options necessary other than the element you want to target. Let's take the sidebar to the left for an example.

43 |

You invoke the plugin as so:

44 | 45 |

 46 | <script>
 47 |   // For basic use
 48 |   $('.sidebar').stickEmUp();
 49 |   
 50 |   // To access additional public methods:
 51 |   $('.sidebar').stickEmUp().data('plugin_stickEmUp');
 52 | </script>
 53 |

54 | 55 |

When the sidebar reaches the top of the viewport, the class stickeEmUp (which can be overridden in the options) is added to the sidebar element. This class would contain the position:fixed and any other styling you wish to add, creating the sticky effect. When you scroll back up, once the sidebar has reached its original position, the class is removed, and the element regains it's original positioning.

56 |

Given the unique needs of an elements fixed position specific to a webpage and it's surrounding context, this plugin does not attempt to get into any of that. Instead, the stickEmUp or other named class you provide is added and removed, and you are left to create the CSS needed for your desired effect.

57 | 58 |

The code below is an example of what is used on this page.

59 | 60 |

 61 | <style>
 62 |   .sidebar{
 63 |     position: absolute;
 64 |     width: 200px;
 65 |     margin-top: 130px;
 66 |     background: #fff;
 67 |     border-radius: 4px;
 68 |     padding: 20px 0;
 69 |   }
 70 |   .sidebar.stickEmUp{
 71 |     position: fixed;
 72 |     margin-top: 10px;
 73 |   }
 74 | </style>
 75 | 
 76 | <script>
 77 |   $('.sidebar').stickEmUp({
 78 |     stickOffset: 10,
 79 |     callback: function(info){
 80 |       console.log(info);
 81 |     }
 82 |   });
 83 | </script>
 84 |

85 | 86 |

87 | 88 |

89 |

Additional Features

90 |

You can disable the plugin at any time by calling the public disableSticky method, and re-enable 91 | the plugin with defaultSticky. Be sure to include the .data('plugin_stickEmUp') if using 92 | this feature.

93 | 94 | 95 | 96 | 97 | 98 |

 99 |   // Set a variable for your element:
100 |   
101 |   var stickEm = $('.sidebar').stickEmUp().data('plugin_stickEmUp');
102 | 
103 |   // Disable plugin:
104 |   $('[data-action="stop"]').click(function(){
105 |     stickEm.disableSticky();
106 |   })
107 | 
108 |   // Re-enable plugin
109 |   $('[data-action="stop"]').click(function(){
110 |     stickEm.defaultSticky();
111 |   })
112 |

113 | 114 | 115 | 116 |

117 | 118 | 119 |

120 |

Download

121 |

View it on Github

122 |

Download ZIP

123 |

 git clone https://github.com/benrlodge/stickEmUp.git

124 | 125 | 126 |

127 | 128 | 129 | 130 |

131 |

About

132 | 133 |

Setting elements sticky at certain positions on pages is a frequently requested feature. As a resourceful (AKA lazy) developer I looked for plugins that would help me do this without writing my own. I wanted something simple, but couldn't find it, so I built this once.

134 |

This plugin will tell you when your given element is at a certain point on the page, what direction the user was scrolling when it hit that element, adds a class to the element during that time, and provides a callback throughout all of this scrolling to do what you please with this information.

135 | 136 |

This is all I've needed for my basic needs, so that's all it provides. If you have any ideas for additional features, please feel free to submit a Github issue or submit a pull request

137 |

138 |