Bootstrap source code Analysis of transition, affix

First, Transition (filter)

As a basic supported component, it is referenced more than once by other components. Implements the ability to support transition based on the browser and then binds the end event of the animation;
First: Create an element;
Then: iterate to see the transition animated names supported by this element
Transition implementation of the technique, mainly rewrite the jquery event object, the code is as follows:

$ (function  () {    = transitionend ()    ifreturn    = {      bindtype: $.support.transition.end,      delegatetype: $.support.transition.end,        function  (e) {        if ($ (E.target). Is (thisreturn E.handleobj.handler.apply (this, arguments)}}  )

Second, affix (automatic floating positioning)

1. Target: The parameter indicates its location reference node (should be the parent container object that produces the scrollbar), which is the default window
2, Data-offset set the top and bottom values, will only be used to evaluate the expression, not set to the CSS
3. Three position positioning style class:

3.1, Affix-top: The style that will be added when reaching the top of the page
3.2, affix: The style that will be added when the middle of the page
3.3, Affix-bottom: The style that will be added at the bottom of the page

4, processing formula:

1. Top:traget scroll bar height (scrolltop) < element set distance from top position (OFFSETTOP) (first judgment)
1.1, ScrollTop set to: The element itself positioned top (the element is currently positioned away from the origin of the document) (not the first time)
2. Getpinnedoffset: Gets the top of the stick element Top–target scroll bar
3, bottom: If the stick element is the first time bottom positioning, then the bottom is the target scrollbar height + target element height >= the entire document scrollbar height-sticking element distance from the bottom of the height
3.1, if the non-first bottom positioning
3.1.1, if offsettop (the distance the element sets from the top position) is not empty, the value of the top + Getpinnedoffset of target > The value of the stick element currently anchored to top
3.1.2, if offsettop is empty, Target's top + target element height > Document height – sticks to the height of the element's distance from the bottom
4, can change the adhesion element only his top,top value is: Document height-stick element Height-stick element distance from the bottom of the height

5. Where the Pit is located:

1, top and bottom with the use of time, there will be conflicts, reasons:

Affix-bottom, that is, when you reach the bottom of the page, bootstrap is the top value set with offset to add a position:relative value to the element, which results in a return to the top of the page, when scrolling down again, no effect
cause : The relative of the inline style setting overrides the fixed style set in class

6. Summary

1. Good performance in top condition, need to join manual control in bottom case
2, apply affix control, at least to override the affix style, to control the positioning of the stick bar.

Bootstrap source code Analysis of transition, affix