A jQuery plugin for sticky positioning. Fix containers to the viewport relative to an ancestor. To see it in action you can see the demo page or development pages development page 1, development page 2, development page 3.
Modern browsers, ie8+ are supported.
Download the production version or the development version.
Add jQuery
<script src="https://github.com/bbarakaci/fixto/raw/master/jquery.js"></script>Add fixTo
<script src="https://github.com/bbarakaci/fixto/raw/master/fixto.min.js"></script>Use it with jQuery
$('#nav').fixTo('body');You can fix multiple containers to multiple ancestors. Make sure your selectors match exactly.
$('.sticky').fixTo('.sticky-holder');Passing options
$('#left-banner').fixTo('#left-column', {
className : 'my-class-name',
zIndex: 10,
mind: '#header',
top: 20
});Instantiate without jQuery:
var sticky = fixto.fixTo(domElementToFix, domElementToBeFixed, options);When the container is fixed, it will receive the class name fixto-fixed. You may use this class or you may pass any other class name as an option. This feature will not work when native postion sticky is used. See known issues
See above example.
Although you can set z-index with css, it is possible to pass a zIndex option. See above example.
When you have other fixed containers on a page, pass those containers as mind option to prevent overlapping.
Example
$('#header').fixTo('body');
$('#left-banner').fixTo('#left-column', {
mind: '#header'
});Selector can be in any form that jQuery can handle. You can pass multiple elements.
In pixels. Fixed element will preserve a gap on its top.
Fixto will use native position sticky when supported by the browser. Set this option to false to disable.
This option can not be overwritten after initialization. If you need to do so, you can destroy the instance and create a new one.
While fixto can fix a container to any of its ancestors, native sticky will fix it to the nearest containing block, which is generally its parent.
There is no native way to know if the container is sticked, so it will not receive the css class name.
Native sticky will perform very well as all the work is done by the browser. Without native sticky you will notice delayed response and undesired effects on IOS as all the javascript execuion is halted on scroll. Setting -webkit-transform: translate(0) to parent container will eliminate undesired effect, delayed response will remain.
Allows for scrolling through the parent's bottom padding. Defaults to true, making fixed element stop when parent's bottom padding is reached. Won't work with native "sticky" implementation.
If set to true, the viewport height will be taken into consideration. If viewport height is shorter than the sticky element, it will not stick not to render any content inaccesible. This option won't work with native position sticky.
Following methods can be called directly on the instance or with jQuery.
Fixto tries to adapt to the layout during scroll and window resize. In case the layout changes dynamically at any time, use refresh to force fixto to adapt.
instance.refresh();jQuery:
$('#nav').fixTo('refresh');Resets the options. Fixto will refresh itself automatically after this method is used.
instance.setOptions({
top: 10
});jQuery:
$('#nav').fixTo('setOptions', {
top: 10
});Destroys the instance:
instance.destroy();jQuery:
$('#nav').fixTo('destroy');Stops the instances behavior without destroying the instance.
instance.stop();jQuery:
$('#nav').fixTo('stop');Starts the instances behavior.
instance.start();jQuery:
$('#nav').fixTo('start');margin:auto. You will need an additional wrapper around the element. This is because webkit differs from other browsers about reporting the computed margin values.Some features are not implemented for the native position sticky version. Fixto normally does a lot of calculations during scroll. These calculations are not done when using native position sticky. Although it is possible to implement these features by doing same calculations, for now it is decided not to do so, for performance reasons and for the sake of obeying to the natural development of position sticky. Finally, one day, we will not need to use fixto anymore.
Or we will choose the other path. We will decide to implement the features we need to have fixto as a plugin that does its own magic. Please open an issue if you would like to see additional features when running on native sticky mode. If there is an issue, just participate with your +1. It will help us to decide for the future.
You might be wondering why position sticky does not work for your layout.
Position sticky won’t work when: