To include the source files for YUI Affix Plugin and its dependencies, first load the YUI seed file if you haven't already loaded it.
<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
Next, create a new YUI instance for your application and populate it with the
modules you need by specifying them as arguments to the YUI().use() method.
YUI will automatically load any dependencies required by the modules you
specify.
<script>
// Create a new YUI instance and populate it with the required modules.
YUI({
gallery: 'gallery-2013.05.10-00-54'
}).use('gallery-affix', function (Y) {
// YUI Affix Plugin is available and ready for use. Add implementation
// code here.
});
</script>
For more information on creating YUI instances and on the
use() method, see the
documentation for the YUI Global Object.
Use Affix by plugging it into the node you want fixed. Pass it a configuration object with an offset property. This property may be either a number or an object. A number will be assumed the same value for both the top and left offsets. The object may have top and/or left properties. This offset is the number of pixels from which the node will become fixed.
YUI({
gallery: 'gallery-2013.05.10-00-54'
}).use('gallery-affix', function (Y) {
Y.one('#navbar').plug(Y.Plugin.Affix, {
offset: {
top: 100
}
});
});
Alternatively you can set the offset as a data- attribute of the plugged node.
<div class="affix" data-offset-top="100">...</div>
You can use the Affix plugin in nodes or in widgets. When plugging it into a Widget the widget's boundingBox will be used.
The left navigation of this document page is a working example of the Affix plugin.