Bootstrap JS Ref

Bootstrap Affix Plugin (Advanced)

The Affix Plugin

The Affix plugin allows an element to become affixed (locked) to an area on
the page. This is often used with navigation menus or
social icon buttons, to make them "stick" at a specific area while scrolling
up and down the page.

The plugin toggles this behavior on and off (changes the value of
CSS position from static to fixed), depending on
scroll position.

Example 1) An affixed navbar:

Example 2) An affixed sidebar:

With Affix, when we scroll up and down the page, the menu is always visible and locked in its position.

How To Create an Affixed Navigation Menu

The following example shows how to create a horizontal affixed navigation menu:

Example

Example Explained

Add data-spy="affix" to the element you want affixed.

Optionally, add the data-offset-top|bottom attribute to
calculate the position of the scroll.

How it works

The affix plugin toggles between three classes: .affix, .affix-top, and
.affix-bottom. Each class represents a particular state. You must add CSS
properties to handle the actual positions, with the exception of position:fixed
on the .affix class.

The plugin adds the .affix-top or .affix-bottom class to indicate the element is in its top-most or bottom-most position. Positioning with CSS is not required at this point.

Scrolling past the affixed element triggers the actual affixing - This is where the plugin replaces the .affix-top or .affix-bottom class with the .affix class (sets position:fixed). At this point, you must add the CSS top or bottom property to position the affixed element in the page.

If a bottom offset is defined, scrolling past it replaces the .affix class with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position:absolute when necessary.

In the first example above, the Affix plugin adds the .affix class (position:fixed)
to the <nav> element when we have scrolled 197 pixels from the top. If you open
the example, you will also see that we added the CSS top property with a value of 0
to the .affix class. This is to make sure that the navbar stays at the top of the page at
all time, when we have scrolled 197 pixels from the top.

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 1999-2018 by Refsnes Data. All Rights Reserved.Powered by W3.CSS.