Bootstrap source code learning and example: Bootstrap-Affix

The newly added component of Bootstrap in 2.1 is fixed. In fact, this component is very simple, that is, the screen is fixed or not fixed by adding or removing the affix Class Name. When the page is loaded, the JS plug-in will search for all the [data-Spy = "Affix"] elements on the page, then, find the data-offset-top or data-offset-bottom attribute, that is, if the number of pixels from the top (bottom) of the page is less than the number of pixels, You can discard the fix. How do you scroll normally, all fixed elements remain unchanged at this position.

This component takes effect when JS and CSS are introduced as long as you define two attributes for the element. You do not need to write codes. Many examples on the Internet are here!

This component does not have any custom events!

! Function ($) {"use strict"; // jshint ;_; /* affix Class Definition * ============================= */var affix = function (element, options) {This. options = $. extend ({}, $. FN. affix. ults, options) This. $ window = $ (window) // as long as the event is bound. on ('scroll. affix. data-API ', $. proxy (this. checkposition, this )). on ('click. affix. data-API ', $. proxy (function () {setTimeout ($. proxy (this. checkposition, this), 1)}, this) // This is automatically corrected when we move or click. $ element = $ (element) This. checkposition ()} affix. prototype. checkposition = function () {If (! This. $ element. is (': visible') return var scrollheight = $ (document ). height (), scrolltop = This. $ window. scrolltop (), position = This. $ element. offset (), offset = This. options. offset, offsetbottom = offset. bottom, offsettop = offset. top, reset = 'affix affix-top affix-bottom ', affix if (typeof offset! = 'Object') offsetbottom = offsettop = offset if (typeof offsettop = 'function') offsettop = offset. top () if (typeof offsetbottom = 'function') offsetbottom = offset. bottom () // compare the distance from the current element to the top with window. pageyoffset difference // remove the fixed effect affix = this using the affix-top affix-bottom class names. unpin! = NULL & (scrolltop + this. unpin <= position. Top )? False: offsetbottom! = NULL & (position. Top + this. $ element. Height ()> = scrollheight-offsetbottom )? 'Bottom ': offsettop! = NULL & scrolltop <= offsettop? 'Top': false if (this. affixed = affix) return this. affixed = affix this. unpin = affix = 'bottom '? Position. Top-scrolltop: NULL this. $ element. removeclass (reset). addclass ('affix '+ (affix? '-' + Affix :''))} /* affix plugin definition * =================================*/var old = $. FN. affix $. FN. affix = function (option) {return this. each (function () {var $ this = $ (this), data = $ this. data ('affix '), Options = typeof option = 'object' & option if (! Data) $ this. data ('affix ', (Data = new affix (this, options) if (typeof option = 'string') data [Option] () // This is invalid because it only has one checkposition method, which is automatically called})} $. FN. affix. constructor = affix $. FN. affix. defaults = {offset: 0}/* affix no conflict * =========================*/$. FN. affix. noconflict = function () {$. FN. affix = old return this}/* affix DATA-API * ===================*/$ (window ). on ('load', function () {// retrieve all elements with [data-Spy = "Affix"] on the page, it also has a property like data-offset-Top = 50 data-offset-Bottom = 10 $ ('[data-Spy = "Affix"]'). each (function () {var $ Spy = $ (this), data = $ spy. data () data. offset = data. offset | {} // open a space on the cached object // put the difference data. offsetbottom & (data. offset. bottom = data. offsetbottom) data. offsettop & (data. offset. top = data. offsettop) $ spy. affix (data)} (window. jquery );

</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> Bootstrap learning by situ zhengmei </title> <br/> <meta HTTP -equiv = "Content-Type" content = "text/html; charset = UTF-8 "> </P> <p> <LINK rel =" stylesheet "href =" http://files.cnblogs.com/rubylouvre/bootstrap.css "/> <br/> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/jquery1.83.js "> </ SCRIPT> <br/> <SCRIPT src = "http://files.cnblogs.com/rubylouvre/bootstrap-transition. JS "> </SCRIPT> </P> <p> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/bootstrap-affix.js "> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> edit document template </p> <br/> <HR/> </P> <p> <Div class = "Row- fluid "> <br/> <Div class =" span3 "> <br/> <ul class =" nav-list "data-Spy =" Affix "data-offset- top = "40"> <br/> <li> <a href = "# One"> <I class = "icon-chevron-Right"> </I> one </A> </LI> <br/> <li> <a href = "# TW O "> <I class =" icon-chevron-Right "> </I> two </a> </LI> <br/> <li> <a href =" # Three "> <I class =" icon-chevron-Right "> </I> three </a> </LI> <br/> <li> <a href = "# Four"> <I class = "icon-chevron-Right"> </I> four </a> </LI> <br/> <li> <a href = "# Five"> <I class = "icon-chevron-Right"> </I> five </a> </LI> <br/> <li> <pref = "# Six"> <I class = "icon-chevron-Right"> </I> six </a> </LI> <br/> <li> <a href = "# Seven"> <I class = "icon-chevron -Right "> </I> seven </a> </LI> <br/> </ul> </P> <p> </div> <br/> <Div class = "span9"> <br/> <fieldset id = "one"> <br/> <legend> one </legend> <br/> <Div class = "fieldset-content"> <br/> <p> <br/> "sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.pdf, totam REM aperiam, eaque IPSA quae AB Illo inventore veritatis et quasi <br/> unable to beatae vitae dicta sunt ex Plicabo. nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur Magni Dolores EOS qui ratione <br/> voluptatem Sequi nesciunt. neque porro sort est, qui dolorem ipsum quia dolor sit Amet, Baidu, adipisci Velit, sed quia non numquam eius Modi tempora incidunt ut <br/> labore et dolore magnam aliquaerat night. ut enim ad minima veniam, Q UIS nostrum exercitationem ullam quota is suscipit laboriosam, nisi ut aliquid ex EA commodi <br/> consequatur? Quis autem vel Eum iure reprehenderit qui in EA voluptate Velit esse quam nihil molestiae consequatur, Vel illum qui dolorem eumfugiat quovoluptas nulla pariatur? "<Br/> </P> <br/> </div> <br/> </fieldset> </P> <p> <fieldset id =" two "> <br/> <legend> two </legend> <br/> <Div class = "fieldset-content"> <br/> <p> <br/> "sed UT perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.pdf, totam REM aperiam, eaque IPSA quae AB Illo inventore veritatis et quasi <br/> failed to beatae vitae dicta sunt explicabo. nemo enim ipsam voluptatem Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur Magni Dolores EOS qui ratione <br/> voluptatem Sequi nesciunt. neque porro sort est, qui dolorem ipsum quia dolor sit Amet, Baidu, adipisci Velit, sed quia non numquam eius Modi tempora incidunt ut <br/> labore et dolore magnam aliquaerat night. ut enim ad minima veniam, Quis nostrum exercitationem ullam Cor Poris suscipit laboriosam, nisi ut aliquid ex EA commodi <br/> consequatur? Quis autem vel Eum iure reprehenderit qui in EA voluptate Velit esse quam nihil molestiae consequatur, Vel illum qui dolorem eumfugiat quovoluptas nulla pariatur? "<Br/> </P> <br/> </div> <br/> </fieldset> </P> <p> <fieldset id =" three "> <br/> <legend> three </legend> <br/> <Div class = "fieldset-content"> <br/> <p> <br/> "sed UT perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.pdf, totam REM aperiam, eaque IPSA quae AB Illo inventore veritatis et quasi <br/> failed to beatae vitae dicta sunt explicabo. nemo enim ipsam volupta TEM quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur Magni Dolores EOS qui ratione <br/> voluptatem Sequi nesciunt. neque porro sort est, qui dolorem ipsum quia dolor sit Amet, Baidu, adipisci Velit, sed quia non numquam eius Modi tempora incidunt ut <br/> labore et dolore magnam aliquaerat night. ut enim ad minima veniam, Quis nostrum exercitationem ullam Operator is suscipit laboriosam, nisi ut aliquid ex EA commodi <br/> consequatur? Quis autem vel Eum iure reprehenderit qui in EA voluptate Velit esse quam nihil molestiae consequatur, Vel illum qui dolorem eumfugiat quovoluptas nulla pariatur? "<Br/> </P> <br/> </div> <br/> </fieldset> </P> <p> <fieldset id =" four "> <br/> <legend> four </legend> <br/> <Div class = "fieldset-content"> <br/> <p> <br/> "sed UT perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.pdf, totam REM aperiam, eaque IPSA quae AB Illo inventore veritatis et quasi <br/> failed to beatae vitae dicta sunt explicabo. nemo enim ipsam voluptate M quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur Magni Dolores EOS qui ratione <br/> voluptatem Sequi nesciunt. neque porro sort est, qui dolorem ipsum quia dolor sit Amet, Baidu, adipisci Velit, sed quia non numquam eius Modi tempora incidunt ut <br/> labore et dolore magnam aliquaerat night. ut enim ad minima veniam, Quis nostrum exercitationem ullam C Orporis suscipit laboriosam, nisi ut aliquid ex EA commodi <br/> consequatur? Quis autem vel Eum iure reprehenderit qui in EA voluptate Velit esse quam nihil molestiae consequatur, Vel illum qui dolorem eumfugiat quovoluptas nulla pariatur? "<Br/> </P> <br/> </div> <br/> </fieldset> </P> <p> <fieldset id =" five "> <br/> <legend> five </legend> <br/> <Div class = "fieldset-content"> <br/> <p> <br/> "sed UT perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.pdf, totam REM aperiam, eaque IPSA quae AB Illo inventore veritatis et quasi <br/> failed to beatae vitae dicta sunt explicabo. nemo enim ipsam voluptate M quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur Magni Dolores EOS qui ratione <br/> voluptatem Sequi nesciunt. neque porro sort est, qui dolorem ipsum quia dolor sit Amet, Baidu, adipisci Velit, sed quia non numquam eius Modi tempora incidunt ut <br/> labore et dolore magnam aliquaerat night. ut enim ad minima veniam, Quis nostrum exercitationem ullam C Orporis suscipit laboriosam, nisi ut aliquid ex EA commodi <br/> consequatur? Quis autem vel Eum iure reprehenderit qui in EA voluptate Velit esse quam nihil molestiae consequatur, Vel illum qui dolorem eumfugiat quovoluptas nulla pariatur? "<Br/> </P> <br/> </div> <br/> </fieldset> </P> <p> <fieldset id =" six "> <br/> <legend> six </legend> <br/> <Div class = "fieldset-content"> <br/> <p> <br/> "sed UT perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.pdf, totam REM aperiam, eaque IPSA quae AB Illo inventore veritatis et quasi <br/> failed to beatae vitae dicta sunt explicabo. nemo enim ipsam voluptatem Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur Magni Dolores EOS qui ratione <br/> voluptatem Sequi nesciunt. neque porro sort est, qui dolorem ipsum quia dolor sit Amet, Baidu, adipisci Velit, sed quia non numquam eius Modi tempora incidunt ut <br/> labore et dolore magnam aliquaerat night. ut enim ad minima veniam, Quis nostrum exercitationem ullam Cor Poris suscipit laboriosam, nisi ut aliquid ex EA commodi <br/> consequatur? Quis autem vel Eum iure reprehenderit qui in EA voluptate Velit esse quam nihil molestiae consequatur, Vel illum qui dolorem eumfugiat quovoluptas nulla pariatur? "<Br/> </P> <br/> </div> <br/> </fieldset> </P> <p> <fieldset id =" seven "> <br/> <legend> seven </legend> <br/> <Div class = "fieldset-content"> <br/> <p> <br/> "sed UT perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.pdf, totam REM aperiam, eaque IPSA quae AB Illo inventore veritatis et quasi <br/> failed to beatae vitae dicta sunt explicabo. nemo enim ipsam volupta TEM quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur Magni Dolores EOS qui ratione <br/> voluptatem Sequi nesciunt. neque porro sort est, qui dolorem ipsum quia dolor sit Amet, Baidu, adipisci Velit, sed quia non numquam eius Modi tempora incidunt ut <br/> labore et dolore magnam aliquaerat night. ut enim ad minima veniam, Quis nostrum exercitationem ullam Operator is suscipit laboriosam, nisi ut aliquid ex EA commodi <br/> consequatur? Quis autem vel Eum iure reprehenderit qui in EA voluptate Velit esse quam nihil molestiae consequatur, Vel illum qui dolorem eumfugiat quovoluptas nulla pariatur? "<Br/> </P> <br/> </div> <br/> </fieldset> <br/> </div> <br/> </Div> <br/> </body> <br/> </ptml> <br/>

RUN Code