# Bootstrap Affix Plugin The Affix plugin allows you to specify a `

` that should be fixed to a certain position on the page. A common example is social icons. They will start at a certain position, but when the page is scrolled to a specific marker, the `

` will lock into place and not scroll with the rest of the page. > !(#)If you want to use this plugin functionality individually, you will need to include **affix.js**. Or, as mentioned in the (#) chapter, you can include _bootstrap.js_ or the minified version _bootstrap.min.js_. ## Usage You can use the Affix plugin via data attributes or via JavaScript. * **Via data attributes**: To add Affix behavior to an element, simply add `data-spy="affix"` to the element you want to spy on. Use offsets to define when to toggle the pinning of an element. ### Example The following example demonstrates the usage of the Affix plugin via data attributes: ## Example Bootstrap Affix Plugin /* Custom Styles */ul.nav-tabs{width:140 px; margin-top:20 px; border-radius:4 px; border:1 px solid#ddd; box-shadow:0 1 px 4 px rgba(0, 0, 0, 0.067); }ul.nav-tabs li{margin:0; border-top:1 px solid#ddd; }ul.nav-tabs li:first-child{border-top:none; }ul.nav-tabs li a{margin:0; padding:8 px 16 px; border-radius:0; }ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{color:#fff; background:#0088cc; border:1 px solid#0088cc; }ul.nav-tabs li:first-child a{border-radius:4 px 4 px 0 0; }ul.nav-tabs li:last-child a{border-radius:0 0 4 px 4 px; }ul.nav-tabs.affix{top:30 px; /* Set the top position of pinned element */}

Bootstrap Affix

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.

Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.

Section 2

Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.

Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.

Section 3

Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blan

YouTip

Bootstrap Affix Plugin

Bootstrap Affix

Section 1

Section 2

Section 3

📂 Categories