Search within TutorialsPark

Twitter Bootstrap ScrollSpy


To highlight navigation targets based on scroll positions


Twitter Bootstrap: ScrollSpy

1. The purpose of a scroll spy is to automatically update targets on navigation bar based on scroll position.

2. In order to add the scrollspy functionality to your navigation, add data-spy="scroll" to the element which is to be spied(usually its the element <body>)

3. Then specify the ID or class of the parent element to the attribute add data-target within the .nav component.

Example: Twitter Bootstrap ScrollSpy

Give it a TRY! »

Twitter Bootstrap: ScrollSpy using Javascript

1. Scrollspy can be added using Javascript method $().scrollspy({target: ' '}) .

Example:Twitter Bootstrap Scroll Spy Using Javascript

Give it a TRY! »

Twitter Bootstrap: Javascript Method - .scrollspy('refresh')


1. When you are adding or removing elements to the DOM (document object model), the refresh method needs to be called using javascript method $().scrollspy('refresh') .

Example:Twitter Bootstrap Javascript method scrollspy('refresh')

Give it a TRY! »

Twitter Bootstrap: Options

Name Type Default Description
offset number 10 To set the offset pixel from the top when calculating the scroll position

While passing options via data attributes or Javascript, the option is specified in the form data- , and in this case it is data-offset=" "


Twitter Bootstrap: Javascript Events

Event type Description
activate.bs.scrollspy The event is fired when an item gets activated with the scrollspy.

1. Scrollspy plugin has an event which gets fired when a item is made active using the scrollspy.

Example:Twitter Bootstrap Scrollspy Events

Give it a TRY! »