Details about rolling positioning on mobile terminals in js

Objective

What is scrolling positioning, I think, refers to the scrolling behavior triggered by some of the positioning of the show is rolling, such as see some of the nav, in the default is displayed in the page of a region, and when scrolling to the area when the element will "adsorption" in the browser.

This technique is used by a lot of us, such as the content navigation in JD's product introduction page, click here to view

Realization of the idea

Generally to determine the distance from the top of the page target element (offset+top), bound scrolling events, when the scroll bar distance from the top (scroll_top) is greater than or equal to (offset_top) when the target element is fixed positioning can be achieved. Code such as:

var $elem = $ ('. Test '). EQ (0);
var offset_top = $elem. Offset (). Top;
var $window = $ (window);
$window. On (' Scroll resize ', function () {
if ($window. scrolltop () >= offset_top) {
$elem. addclass (' fixed ');
} else {
$elem. Removeclass (' fixed ');
}
}). Trigger (' scroll ');

Note that you have to understand whether the scrolling target element will have scrolling beyond the bottom of the problem, such as the JD above, and when the target navigation scrolls beyond the content area, the scrolling positioning causes the vanishing. such as this page when you turn the browser window "low" scrolling page to the bottom of the you will find the elements of scrolling positioning "deviation", which is beyond the bottom, of course, you will not ask who is so wonderful to "play" Ah, but I would like to say that since doing this is as good as possible ~

Problems with the mobile end

The experience on the mobile side of the demo above is poor because the mobile end has a scrolling buffer, such as:

Originally I want to do a scrollevent hack, is the finger touch the screen began to setinterval this callback, since the simulation scroll, but in the case of the demo is no Line pass, It seems impossible to see that even setinterval will pause as soon as the finger touches the screen and the finger leaves the screen without triggering the scroll.

Solve the mobile End experience problem

Just after inadvertently browsing the JD of a product page, found that his scrolling positioning elements in the mobile end experience is quite perfect, so I study it, look at his source code:

...
This.isusesticky = This.supportsticky ();
...
ItemDet.prototype.supportSticky = function () {
var T;
var n = '-webkit-sticky ';
var e = document.createelement (' i ');
E.style.position = n;
t = e.style.position;
e = null;
return T = = n;
};
...
if (!this.isusesticky) {
This.dettabh = $ (' #detailBaseLine '). Offset (). Top;
if (St > This.dettabh) {
if (!this.dettabfloatshow) {
$ (' #detailTab '). addclass (' mod_tab_fixed ');
}
This.dettabfloatshow = true;
}
else {
if (this.dettabfloatshow) {
$ (' #detailTab '). Removeclass (' mod_tab_fixed ');
}
This.dettabfloatshow = false;
}
}
...
Look at the code means to determine if it is compatible with sticky, and what is this ghost? So I looked in the handbook and there was a surprising discovery:

Sticky: Objects follow normal flow in normal times. It is like a relative and a fixed, when in the screen when the regular flow typesetting, when scrolling to the screen when the performance as fixed. The performance of this property is the adsorption effect you see in the real world. (CSS3)

Grammar:

position:static | Relative | Absolute | Fixed | Center | Page | Sticky
Default value: Static
Apply to: Except < ' display ' > attribute defined as "table-column-group | All elements outside of table-column"
Inheritance: None
Animation Sex: No
Calculated value: Specified value
Media: Visual
Take value:

Static
Objects follow a regular stream. Properties such as < ' top ' >,< ' right ' >,< ' bottom ' >,< ' left ' > will not be applied.
Relative:
An object follows a regular stream and does not affect any element in the regular stream by referencing its position in the regular stream through the < ' top ' >,< ' right ' >,< ' bottom ' >,< ' left ' > attribute.
Absolute:
Objects are detached from the regular stream and are absolutely positioned using attributes such as < ' top ' >,< ' right ' >,< ' bottom ' >,< ' left ' >, and the offset of the box does not affect any element in the regular stream. Its margin is not folded with any other margin.
Fixed
Objects are detached from the regular stream, using properties such as < ' top ' >,< ' right ' >,< ' bottom ' >,< ' left ' > to navigate the window as the reference point, and the object does not scroll with the scroll bar.
Center
Objects are detached from the regular stream, using properties such as < ' top ' >,< ' right ' >,< ' bottom ' >,< ' left ' > to specify the position or size of the box. The box is centered vertically horizontally in its containing container. The offset of the box does not affect any element in the regular stream, and its margin does not collapse with any other margin. (CSS3)
Page
The position of the box is calculated by reference to "absolute". The box is in the paging media or area block, the box's containing block is always the initial containing block, otherwise it depends on each "absolute" mode. (CSS3)
Sticky
objects follow the normal flow when they are normal. It is like the "relative" and "fixed", when in the screen when the regular flow typesetting, when scrolling to the screen when it behaves like "fixed". The performance of this property is the adsorption effect you see in the real world. (CSS3)
* CSS3 new properties may have description errors and changes, for reference only, continuous update
Description
Retrieves how the object is positioned.
When < ' position ' > value is "static", its cascade level is defined by the < ' z-index ' > attribute.
Absolutely positioned elements, when the < ' top ' >,< ' right ' >,< ' bottom ' >,< ' left ' > attribute is not set, it follows the sibling element in front of it, but does not affect any elements in the regular stream in the position. With this feature you might do something like this: demo
The corresponding script attribute is position.

Then you can also use JD to move the end, if you support CSS3 sticky use her, otherwise JS compatible.