A comprehensive analysis of transition and affix in bootstrap and its application _javascript techniques

First, Transition (filtration)
As a base-supported component, it is referenced multiple times by other components. Implement the ability to support transition according to the browser, and then bind the end event of the animation;
First: Create an element;
Then: Iterate over the transition animation name supported by this element
The trick of transition is to rewrite the jquery event object with the following code:

$ (function () {
 $.support.transition = transitionend ()

 if (!$.support.transition) return

 $. Event.special.bsTransitionEnd = {
  Bindtype: $.support.transition.end,
  delegatetype: $. Support.transition.end,
  handle:function (e) {
  if ($ (e.target). is (it)) return e.handleobj.handler.apply ( This, arguments)
  }}}
 )

Second, affix (automatic floating positioning)
1. Target: The parameter represents its positioning reference node (should be the parent container object that produces the scroll bar), default is window
2, Data-offset set the top and bottom values , will only be used to evaluate expressions, will not be set to the CSS
3, three position style categories:

3.1, Affix-top: At the top of the page will add the style
3.2, affix: In the middle of the page will add the style
3.3, Affix-bottom: At the bottom of the page will add the style

4, processing formula:

4.1, Top:traget of the scroll bar height (scrolltop) < elements set the distance from the top position (offsettop) (first judgment)
4.1.1, ScrollTop set to: Top positioned by the element itself (the distance the element is currently positioned from the origin of the document) (not for the first time)
4.2, Getpinnedoffset: Get stuck element top–target scroll bar Top
4.3, bottom: If the sticking element is the first time bottom positioning, then bottom is the target scroll bar height + target element height >= the entire document scroll bar height – the height of the glued element distance from the bottom
4.3.1, if the first bottom positioning
1), if the offsettop (element set from the top of the distance) is not empty, target Getpinnedoffset value > stick element is currently positioned to the value
2), if offsettop is empty, Target's top + target element's height > document height-the height of the stuck element from the bottom
4, can change adhere to the element of only his Top,top value: Document height-adhesion element height-stick element distance to the bottom of the height

5, the location of the pit:

1, top and bottom when used together, there will be conflicts, reasons:

Affix-bottom, that is, to reach the bottom of the page, bootstrap is the top value set with offset, add position:relative value to the element, which results in the back of the page, once again scrolling down, no effect
Reason: The relative of the inline style settings overrides the fixed style set in class

6, summary

1, in the top situation good performance, in the case of bottom need to add their own manual control
2, apply the affix control, at least to rewrite the affix style, to control the positioning of the stick bar.

If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

The above is the entire content of this article, I hope to learn JavaScript program to help you.