1. Transition (filter)
As a basic 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 overview of the transition animation name supported by this element
The skill of Transition implementation is mainly to rewrite the event object of jquery, and the code is as follows:
$(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(this)) return e.handleObj.handler.apply(this, arguments) } } })2. Affix (automatic floating positioning)
1. Target: The parameter indicates its positioning reference node (it should be the parent container object that generates the scroll bar), and the default is window
2. The top and bottom values set by Data-offset will only be used to calculate expressions and will not be set into css.
3. Three types of positioning styles:
3.1. Affix-top: The style that will be added when reaching the top of the page
3.2. Affix: Styles that will be added in the middle of the page
3.3. Affix-bottom: Styles that will be added at the bottom of the page
4. Processing formula:
4.1. Top: the scrollbar height of the traget (scrollTop) < The distance from the top position of the element (offsetTop) (first judgment)
4.1.1. ScrollTop is set to: the top positioned by the element itself (the distance from the original point of the element is currently positioned from the document) (not the first time)
4.2. getPinnedOffset: Get the top that sticks the element top target scrollbar
4.3. bottom: If the sticking element is the first time the bottom is positioned, then bottom is the target scrollbar height + the target element height >= The height of the entire document scrollbar height sticking to the element from the bottom
4.3.1. If it is not the first time, bottom positioning
1) If offsetTop (the distance from the top position of the element) is not empty, the top of the target + the value of getpinnedOffset > the value of the sticky element currently positioned to the top
2) If offsetTop is empty, the top of the target + the height of the target element> The height of the document height sticks to the bottom
4. The only top that can change the sticking element is: Document height - The height of the sticking element - The height of the sticking element from the bottom
5. Where the pit lies:
1) When top and bottom are used together, conflicts will occur, reasons:
Affix-bottom, that is, when reaching the bottom of the page, bootstrap uses offset to set the top value, and adds position:relative value to the element, which results in no effect when scrolling down again after returning to the top of the page.
Reason: The relative set of in-line styles will override the fixed styles set in class
6. Summary
1) It is good in the top situation, and you need to add manual control yourself in the bottom situation
2) When applying the affix control, at least rewrite the affix style yourself to control the positioning of the sticky bar.
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial
This series of tutorials has been compiled into: Bootstrap Basic Tutorials Special Topics, welcome to click to learn.
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.