Bootstrap Affix Plugin
The affix plugin allows a <div> to become affixed to a location on the page. You can also toggle it's pinning on and off using this plugin. A common example of this is social icons. They will start in a location, but as the page hits a certain mark, the <div> will become locked in place and will stop scrolling with the rest of the page.
If you want to include this plugin functionality individually, then you will need affix.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
You can use the affix plugin via data attributes or manually with your own JavaScript as discussed below.
Via 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.
Example
The following example demonstrates the usage through data attributes:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div id="myNav" data-spy="affix" data-offset-top="60"
data-offset-bottom="200">
<div class="col-md-3">
<ul class="nav nav-tabsnav-stacked affix" data-spy="affix"
data-offset-top="190">
<li class="active"><a href="#one">Tutorial One</a></li>
<li><ahref="#two">Tutorial Two</a></li>
<li><ahref="#three">Tutorial Three</a></li>
</ul>
</div>
<div class="col-md-9">
<h2 id="one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit.
Nam eu sem tempor,varius quam at, luctus dui.Mauris magna
metus, dapibus necturpis vel, semper malesuadaante.
Vestibulum id metus acnisl bibendum scelerisque nonnon
purus. Suspendissevarius nibh non aliquetsagittis. In
tincidunt orci sit ametelementum vestibulum. Vivamus
fermentum in arcu inaliquam. Quisque aliquam portaodio
in fringilla. Vivamusnisl leo, blandit at bibendumeu,
tristique eget risus. Integer aliquet quam ut elitsuscipit,
id interdum nequeporttitor. Integer
faucibus ligula.</p>
<p>Vestibulum quis quamut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Uttempus
dictum risus.Pellentesque viverra sagittisquam at mattis.
Suspendisse potenti.Aliquam sit amet gravida nibh,
facilisis gravida odio.Phasellus auctor velit at lacus
blandit, commodoiaculis justo viverra. Etiamvitae est
arcu. Mauris vel conguedolor. Aliquam eget mi mi. Fusce
quam tortor, commodo ac dui quis, bibendum viverra erat.
Maecenas mattis lectusenim, quis tincidunt duimolestie
euismod. Curabitur etdiam tristique, accumsan nunceu,
hendrerit tellus.</p>
<hr>
<h2 id="two">Tutorial Two</h2>
<p> Nullam hendreritjusto non leo aliquet imperdiet.Etiam
in sagittis lectus.Suspendisse ultrices placerataccumsan.
Mauris quis dapibusorci. In dapibus velit blanditpharetra
tincidunt. Quisque nonsapien nec lacus condimentumfacilisis
ut iaculis enim. Sedviverra interdum bibendum. Donecac
sollicitudin dolor. Sedfringilla vitae lacus at rutrum.
Phasellus conguevestibulum ligula sed consequat.</p>
<p>Vestibulumconsectetur scelerisque lacus, ac fermentum
lorem convallis sed. Nam odio tortor, dictum quismalesuada at,
pellentesque vitaeorci. Vivamus elementum, feliseu auctor
lobortis, diam velitegestas lacus, quis fermentummetus ante
quis urna. Sed atfacilisis libero. Cum sociisnatoque
penatibus et magnis dis parturient montes, nasceturridiculus
mus. Vestibulumbibendum blandit dolor. Nuncorci dolor,
molestie nec nibh in,hendrerit tincidunt ante.Vivamus sem
augue, hendrerit nonsapien in, mollis ornare augue.</p>
<hr>
<h2 id="three">Tutorial Three</h2>
<p>Integer pulvinar leoid risus pellentesquevestibulum.
Sed diam libero,sodales eget sapien vel,porttitor bibendum
enim. Donec sed nibhvitae lorem porttitor blandit innec ante.
Pellentesque vitaemetus ipsum. Phasellus sed nuncac sem
malesuada condimentum.Etiam in aliquam lectus. Nam velsapien
diam. Donec pharetra idarcu eget blandit. Proinimperdiet
mattis augue inporttitor. Quisque tempus enimid lobortis
feugiat. Suspendissetincidunt risus quis dolorfringilla
blandit. Ut sed sapienat purus lacinia porttitor.Nullam
iaculis, felis apretium ornare, dolor nislsemper tortor, vel
sagittis lacus estconsequat eros. Sed id pretiumnisl.
Curabitur dolor nisl,laoreet vitae aliquam id,tincidunt sit
amet mauris. </p>
<p>Phasellus vitaesuscipit justo. Mauris pharetrafeugiat
ante id lacinia. Etiamfaucibus mauris id temporegestas. Duis
luctus turpis ataccumsan tincidunt. Phasellusrisus risus,
volutpat vel tellus ac,tincidunt fringilla massa. Etiam
hendrerit dolor egetante rutrum adipiscing. Crasinterdum
ipsum mattis, tempusmauris vel, semper ipsum. Duissed dolor
ut enim lobortispellentesque ultricies ac ligula. Pellentesque
convallis elit nisi, id vulputate ipsum ullamcorperut. Cras
ac pulvinar purus, acviverra est. Suspendissepotenti. Integer
pellentesque neque etelementum tempus. Curabiturbibendum in
ligula ut rhoncus.</p>
<p>Quisque pharetravelit id velit iaculis pretium.Nullam a
justo sed ligula portasemper eu quis enim.Pellentesque
pellentesque, metus atfacilisis hendrerit, lectusvelit
facilisis leo, quisvolutpat turpis arcu quis enim.Nulla
viverra lorem elementuminterdum ultricies. Suspendisse
accumsan quam nec antemollis tempus. Morbi velaccumsan diam,
eget convallis tellus.Suspendisse potenti.</p>
</div>
</div>
</div>
Via JavaScript: You can affix an element manually with JavaScript as below:
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
Example
The following example demonstrates the usage through data attributes:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div>
<div class="col-md-3">
<ul class="nav nav-tabsnav-stacked affix" id="myNav">
<li class="active"><a href="#one">Tutorial One</a></li>
<li><ahref="#two">Tutorial Two</a></li>
<li><ahref="#three">Tutorial Three</a></li>
</ul>
</div>
<div class="col-md-9">
<h2 id="one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit.
Nam eu sem tempor,varius quam at, luctus dui.Mauris magna
metus, dapibus necturpis vel, semper malesuadaante.
Vestibulum id metus acnisl bibendum scelerisque nonnon
purus. Suspendissevarius nibh non aliquetsagittis. In
tincidunt orci sit ametelementum vestibulum. Vivamus
fermentum in arcu inaliquam. Quisque aliquam portaodio
in fringilla. Vivamusnisl leo, blandit at bibendumeu,
tristique eget risus. Integer aliquet quam ut elitsuscipit,
id interdum nequeporttitor. Integer
faucibus ligula.</p>
<p>Vestibulum quis quamut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Uttempus
dictum risus.Pellentesque viverra sagittisquam at mattis.
Suspendisse potenti.Aliquam sit amet gravida nibh,
facilisis gravida odio.Phasellus auctor velit at lacus
blandit, commodoiaculis justo viverra. Etiamvitae est
arcu. Mauris vel conguedolor. Aliquam eget mi mi. Fusce
quam tortor, commodo ac dui quis, bibendum viverra erat.
Maecenas mattis lectusenim, quis tincidunt duimolestie
euismod. Curabitur etdiam tristique, accumsan nunceu,
hendrerit tellus.</p>
<hr>
<h2 id="two">Tutorial Two</h2>
<p> Nullam hendreritjusto non leo aliquet imperdiet.Etiam
in sagittis lectus.Suspendisse ultrices placerataccumsan.
Mauris quis dapibusorci. In dapibus velit blanditpharetra
tincidunt. Quisque nonsapien nec lacus condimentumfacilisis
ut iaculis enim. Sedviverra interdum bibendum. Donecac
sollicitudin dolor. Sedfringilla vitae lacus at rutrum.
Phasellus conguevestibulum ligula sed consequat.</p>
<p>Vestibulumconsectetur scelerisque lacus, ac fermentum
lorem convallis sed. Nam odio tortor, dictum quismalesuada at,
pellentesque vitaeorci. Vivamus elementum, feliseu auctor
lobortis, diam velitegestas lacus, quis fermentummetus ante
quis urna. Sed atfacilisis libero. Cum sociisnatoque
penatibus et magnis dis parturient montes, nasceturridiculus
mus. Vestibulumbibendum blandit dolor. Nuncorci dolor,
molestie nec nibh in,hendrerit tincidunt ante.Vivamus sem
augue, hendrerit nonsapien in, mollis ornare augue.</p>
<hr>
<h2 id="three">Tutorial Three</h2>
<p>Integer pulvinar leoid risus pellentesquevestibulum.
Sed diam libero,sodales eget sapien vel,porttitor bibendum
enim. Donec sed nibhvitae lorem porttitor blandit innec ante.
Pellentesque vitaemetus ipsum. Phasellus sed nuncac sem
malesuada condimentum.Etiam in aliquam lectus. Nam velsapien
diam. Donec pharetra idarcu eget blandit. Proinimperdiet
mattis augue inporttitor. Quisque tempus enimid lobortis
feugiat. Suspendissetincidunt risus quis dolorfringilla
blandit. Ut sed sapienat purus lacinia porttitor.Nullam
iaculis, felis apretium ornare, dolor nislsemper tortor, vel
sagittis lacus estconsequat eros. Sed id pretiumnisl.
Curabitur dolor nisl,laoreet vitae aliquam id,tincidunt sit
amet mauris. </p>
<p>Phasellus vitaesuscipit justo. Mauris pharetrafeugiat
ante id lacinia. Etiamfaucibus mauris id temporegestas. Duis
luctus turpis ataccumsan tincidunt. Phasellusrisus risus,
volutpat vel tellus ac,tincidunt fringilla massa. Etiam
hendrerit dolor egetante rutrum adipiscing. Crasinterdum
ipsum mattis, tempusmauris vel, semper ipsum. Duissed dolor
ut enim lobortispellentesque ultricies ac ligula. Pellentesque
convallis elit nisi, id vulputate ipsum ullamcorperut. Cras
ac pulvinar purus, acviverra est. Suspendissepotenti. Integer
pellentesque neque etelementum tempus. Curabiturbibendum in
ligula ut rhoncus.</p>
<p>Quisque pharetravelit id velit iaculis pretium.Nullam a
justo sed ligula portasemper eu quis enim.Pellentesque
pellentesque, metus atfacilisis hendrerit, lectusvelit
facilisis leo, quisvolutpat turpis arcu quis enim.Nulla
viverra lorem elementuminterdum ultricies. Suspendisse
accumsan quam nec antemollis tempus. Morbi velaccumsan diam,
eget convallis tellus.Suspendisse potenti.</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#myNav').affix({
offset: {
top: 60
}
});
});
</script>
Positioning via CSS
In both the above situations, you must provide CSS for the positioning of your content. The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. Follow the below steps to set your CSS for either of the above usage options.
To start, the plugin adds .affix-top to indicate the element is in it's top-most position. At this point no CSS positioning is required.
Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-topand sets position: fixed; (provided by Bootstrap's code CSS).
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.
Options
There are certain options which can be passed via data attributes or JavaScript are listed in the following table:
Option Name
Type/Default Value
Data attribute name
Description
offset
number | function | object
Default: 10
data-offset
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.
ليست هناك تعليقات:
إرسال تعليق