To include the source files for YUI ScrollSpy 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-scrollspy', function (Y) {
// YUI ScrollSpy 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 whose scroll state you want to spy on. This is usually the page's body. Pass it a configuration object with a target attribute. The target attribute should be a CSS selector string or a Node that points to a list that contains links to elements in the page. These links must be hash URLs with a value equal to the element's ID.
YUI({
gallery: 'gallery-2013.05.10-00-54'
}).use('gallery-scrollspy', function (Y) {
Y.one('body').plug(Y.Plugin.ScrollSpy, {
target: '#navbar'
});
});
Alternatively you can set the target as a data- attribute of the plugged node.
<body data-target="navbar">...</body>
The left navigation of this document page is a working example of the ScrollSpy plugin.