Victoria Baker
 Santa Ana, CA

Extras - Affix & Scrollspy

Statistics Invoices Schedule
Affix and Scrollspy
This is an example of Affix and Scrollspy bootstrap components working together. Scroll down or use the links in the right nav menu to navigate the page.
ScrollSpy component
Using Data Attributes

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

Add CSS styles:

body {
	position: relative;
}

And add markup:

<body data-spy="scroll" data-target=".navbar-example">
	...
	<div class="navbar-example">
		<ul class="nav nav-tabs">
		...
		</ul>
	</div>
	...
</body>
Using JavaScript

After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('body').scrollspy({ target: '.navbar-example' });
Scrollspy Refresh Method

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

$('[data-spy="scroll"]').each(function () {
	var $spy = $(this).scrollspy('refresh')
});
Scrollspy Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of scroll.
Scrollspy Events
Event Type Description
activate.bs.scrollspy This event fires whenever a new item becomes activated by the scrollspy.

Example code:

$('#myScrollspy').on('activate.bs.scrollspy', function () {
	// do something…
})
Affix component
Positioning via CSS

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content. The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.

Here's how the affix plugin works:

  1. To start, the plugin adds .affix-top to indicate the element is in its top-most position. At this point no CSS positioning is required.
  2. Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's code CSS).
  3. If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.

Follow the above steps to set your CSS for either of the usage options below.

Using Data Attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>
Using JavaScript

Call the affix plugin via JavaScript:

$('#my-affix').affix({
	offset: {
		top: 100,
		bottom: function () {
			return (this.bottom = $('.footer').outerHeight(true))
		}
	}
});
Affix Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name Type Default Description
offset number | function | object 10 Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset.
target selector | node | jQuery element the window object Specifies the target element of the affix.
Affix Events

Bootstrap's affix class exposes a few events for hooking into affix functionality.

Event Type Description
affix.bs.affix This event fires immediately before the element has been affixed.
affixed.bs.affix This event is fired after the element has been affixed.
affix-top.bs.affix This event fires immediately before the element has been affixed-top.
affixed-top.bs.affix This event is fired after the element has been affixed-top.
affix-bottom.bs.affix This event fires immediately before the element has been affixed-bottom.
affixed-bottom.bs.affix This event is fired after the element has been affixed-bottom.
Navigation
© 2015. Limitless Web App Kit by Eugene Kopyov