FixedContent.js
A mobile-friendly, jQuery plugin that persists content (sidebar, nav, etc.) while scrolling.
A.K.A. sticky sidebar, persistent nav, fixed menu, etc.
How to Use
Download jquery.fixedcontent.min.js to your project folder and include it just before the closing </body> tag. Make sure to include the jQuery library as well.
<script src="jquery.min.js"></script> <script src="jquery.fixedcontent.min.js"></script> </body> Nest .js_fixedcontent within a column (sidebar, etc.), then nest the desired fixed content within it (.js_fixedcontent) like so:
<div class="sidebar-or-column-or-whatever"> <div class="js_fixedcontent"> <!-- content, nav, map, controls, etc. --> </div> </div> Suggestions
The plugin may not work well if .js_fixedcontent is added to an existing element or if CSS is applied to .js_fixedcontent.
Use this plugin sparingly. Most content should scroll naturally with the page. Determine whether it lends context or functionality as the page is scrolled.
Custom Settings
Some of the settings can be customized:
<script src="jquery.fixedcontent.min.js"></script> <script> $(".js_fixedcontent").fixedcontent({ marginTop: 24, minWidth: 767, zIndex: 500 }); </script> marginTop
The margin between the window and fixed element. The margin will remain as the page is scrolled. The default value is 24 (px).
minWidth
The min-width value disables the plugin on mobile devices or narrow screens. If your columns become rows at a certain media query, then it can prevent .js_fixedcontent from overlapping other content. The default value is 767 (px).
zIndex
The default value is 500, but a custom value can be defined if needed.
Other Features
Fluid Width
The .js_fixedcontent element will fill its parents width, both when the page is loaded and if the window is resized.
Position on Load and Refresh
If the page is refreshed the fixed content will remain in its expected position, even if the page was scrolled to a lower position. The same is true if an anchor link from another page is clicked.
Mobile-Friendly
Min-Width
See minWidth section above.
Height vs. Window Height
If the height of .js_fixedcontent is taller than the window, the plugin is disabled and the content will scroll with the page so nothing gets cut off.
Credits
A jQuery plugin by Jeremy Church (@jeremybchurch)
Article: https://j.eremy.net/fixed-content/
