So how does this happen? This article will refer to Wushi's following screen scrolling code to explain this effect.
first, the original code
Here is Wushi's following screen scrolling code, which is scoped to the sidebar on either side of the page and double clicking on the right side of the screen.
Copy Code code as follows:
var $catalogueOffsetTop = $ (' aside#catalogue '). Offset (). Top;
var $archiveOffestTop = $ (' aside#archive '). Offset (). Top;
var $archiveOffestLeft = $ (' aside#archive '). Offset (). Left;
$ (window). bind (' Scroll resize ', function () {
#right-area Scrolling effect on the following screen
if ($ (' #right-area '). Height () <= $ (window). Height ()) {
$ (' #right-area '). Stop (True,true). Animate ({' Top ': $ (document). ScrollTop () + ' px '},800);
}else if ($ (' #right-area '). Height () > $ (window). Height () && $ (' #right-area '). Height () < $ (document). Height ()) {
Within this range is the most critical, allowing for sliding
if ((document). ScrollTop () + $ (window). Height ()) <= $ (' #right-area '). Height ()) {
$ (' #right-area '). Stop (true,true). CSS (' top ', ' 0 ');
}else if ((document). ScrollTop () + $ (window). Height ()) < $ (document). Height ()) {
$right _top = $ (document). ScrollTop () + $ (window). Height ()-$ (' #right-area '). Height ();
$ (' #right-area '). Stop (True,true). Animate ({' Top ': $right _top + ' px '},800);
}else{
$right _top = $ (document). Height ()-$ (' #right-area '). Height ();
$ (' #right-area '). Stop (true,true). css ({' Top ': $right _top + ' px '});
Alert ($ (document). ScrollTop () + $ (window). Height ()-$ (document). Height ());
}
}else if ($ (' #right-area '). Height () >= $ (document). Height ()) {
$ (' #right-area '). Height ($ (document). Height ()). Stop (true,true). css ({' overflow ': ' Hidden ', ' overflow-y ': ' Scroll '}) ;
}
if ($ (document). ScrollLeft () = 0) {//The following scrolling will only be done when the screen is on the left, and note the following if ($ (window). Width () > 1024), is to prevent this from happening under the small screen.
Aside#catalogue sliding up and down
if ($ (' Aside#catalogue '). Outerheight () < $ (window). Height ()) {
if ($ (document). ScrollTop () <= $catalogueOffsetTop) {
$ (' Aside#catalogue '). css ({' position ': ' Static ', ' Top ': $catalogueOffsetTop});
if ($ (window). Width () > 1024) $ (' #main '). css ({' padding-left ': ' 0 '});
}else{
$ (' Aside#catalogue '). css ({' position ': ' fixed ', ' top ': ' 0 '});
if ($ (window). Width () > 1024) $ (' #main '). css ({' Padding-left ': $ (' Aside#catalogue '). Outerwidth () + 5 + ' px '});
}
}else if ($ (' aside#catalogue '). Height () >= $ (window). Height () && $ (' Aside#catalogue '). Outerheight () < ($ (' footer '). Offset (). top-$catalogueOffsetTop)) {
if ((document). ScrollTop () + $ (window). Height ()) <= ($ (' Aside#catalogue '). Outerheight () + $catalogueOffsetTop)) {
$ (' Aside#catalogue '). css ({' position ': ' Static ', ' Top ': $catalogueOffsetTop});
if ($ (window). Width () > 1024) $ (' #main '). css ({' padding-left ': ' 0 '});
}else if ((document). ScrollTop () + $ (window). Height ()) < $ (' footer '). Offset (). top) {
$catalogue _top = $ (window). Height ()-$ (' Aside#catalogue '). Outerheight ()-20;
$ (' Aside#catalogue '). css ({' position ': ' fixed ', ' top ': $catalogue _top + ' px '});
if ($ (window). Width () > 1024) $ (' #main '). css ({' Padding-left ': $ (' Aside#catalogue '). Outerwidth () + 5 + ' px '});
}else{
$catalogue _top = $ (window). Height ()-$ (' Aside#catalogue '). Outerheight ()-($ (document). Height ()-$ (' footer '). Offset (). top);
$ (' Aside#catalogue '). css ({' position ': ' fixed ', ' top ': $catalogue _top + ' px '});
if ($ (window). Width () > 1024) $ (' #main '). css ({' Padding-left ': $ (' Aside#catalogue '). Outerwidth () + 5 + ' px '});
}
}
Aside#archive sliding up and down
if ($ (' aside#archive '). Outerheight () < $ (window). Height ()) {
if ($ (document). ScrollTop () <= $archiveOffestTop) {
$ (' aside#archive '). css ({' position ': ' Static ', ' top ': $archiveOffestTop, ' left ': $archiveOffestLeft + ' px '});
}else{
$ (' aside#archive '). css ({' position ': ' fixed ', ' top ': ' 0 ", ' Left ': $archiveOffestLeft + ' px '});
}
}else if ($ (' aside#archive '). Height () >= $ (window). Height () && $ (' aside#archive '). Outerheight () < ($ (' Footer '). Offset (). top-$archiveOffestTop)) {
if ((document). ScrollTop () + $ (window). Height ()) <= ($ (' aside#archive '). Outerheight () + $archiveOffestTop)) {
$ (' aside#archive '). css ({' position ': ' Static ', ' top ': $archiveOffestTop, ' left ': $archiveOffestLeft + ' px '});
}else if ((document). ScrollTop () + $ (window). Height ()) < $ (' footer '). Offset (). top) {
$catalogue _top = $ (window). Height ()-$ (' aside#archive '). Outerheight ();
$ (' aside#archive '). css ({' position ': ' fixed ', ' top ': $catalogue _top + ' px ', ' left ': $archiveOffestLeft + ' px '});
}else{
$catalogue _top = $ (window). Height ()-$ (' aside#archive '). Outerheight ()-($ (document). Height ()-$ (' footer '). Offset (). top);
$ (' aside#archive '). css ({' position ': ' fixed ', ' top ': $catalogue _top + ' px ', ' left ': $archiveOffestLeft + ' px '});
}
}
}else{//If the screen is not on the left side, let the two follow the return position
$ (' Aside#catalogue '). css ({' position ': ' Static ', ' Top ': $catalogueOffsetTop});
$ (' #main '). css ({' padding-left ': ' 0 '});
$ (' aside#archive '). css ({' position ': ' Static ', ' top ': $archiveOffestTop, ' left ': $archiveOffestLeft + ' px '});
}
}). Scroll (). resize ();
There are a lot of related code on the network, there are more than 7 lines of code to solve this problem, and even a universal plug-in to achieve this effect. However, they are too universal, for different sites, the specificity of different, in some detail to do more consideration.
Second, choose what way to follow the screen scrolling
There are three kinds of programmes:
1, the use of Position:absolute, and then the top value dynamically assigned value;
2, the use of position:fixed, and then the top value dynamically assigned value;
3. Dynamic assignment of padding-top or margin-top;
The first two are used to postion the position of the element, and, like float, position drag the element out of the normal text stream. The padding or margin method is to control the margin of the element to achieve. What kind of good is it?
Use Position:absolute, there will be rolling jitter (not in Firefox), using padding-top will make the background elements look unsightly, jitter will occur, using position:fixed does not support IE6, Using margin-top has not been tried, should occur jitter. This code selects position:fixed, the only solution that does not occur jitter, but does not have the effect under IE6.
iii. circumstances to be considered
The reason why the Ukrainian help to the site's code to explain, because the online code does not have a specific analysis, many problems are not taken into account.
1. Compare the height of the elements to follow and the height of the screen
All the code on the Web considers the height of the area less than the height of the window, so the code is simple. When the height of the area equals and is greater than the height of the window, we have new considerations.
2, if the region height beyond the window, when to start following scrolling?
It depends on what we want to show the user, if it's an ad, if it's a paragraph of text, if it's a list. My design is that when the screen scrolls down, but there is no effect when all the elements that will be displayed are full, and when the screen scrolls to the bottom of the element, the effect triggers, and then scrolls down, the bottom of the element is aligned with the bottom of the screen, and the lower part of the element is always present on the screen. Of course, different Web pages, your design is naturally different, you may also be designed to scroll down without effect, when scrolling to an ad, the ads and the top of the screen to follow the scrolling.
Figure one follow screen scrolling logic design diagram
Let's take a look at this design idea from figure one. The green part of the figure is the area to follow the scrolling, the gray part is the entire page, the light gray part is the screen (the area that can be seen) we simulate scrolling down the scroll bar by moving the light gray screen down. In the ① phase for the initial phase, this time the Web page everything according to the initial operation, there is no action. To the ② phase, the screen scrolls down to a critical point, the lowest end of the scrolling area. After the ③ phase is rolled over the critical point, the elements begin to follow the screen scrolling, and we can see that the bottom of the element is aligned with the bottom of the screen, and the top of the element is not visible. The ④ stage of the screen scrolling to the end, you can imagine, the bottom of the page is a number of copyright information, the elements can not follow the roll to the end of the information to cover up, so the red line in the place no longer follow the scroll.
This is a diagram of the downward scrolling of the screen, which is the reverse of this order when the screen scrolls up. Another consideration, however, is that when the screen scrolls up and scrolls through the initial shape, the critical point is the top of the green area in the ④, and the top of the screen and the top of the element are aligned when scrolling up. Due to technical difficulties, Wushi did not achieve this effect.
3. Calculation of number and quantity
In scrolling, we have to master those quantities are changes, which are unchanged, in the same change, in the change to find the same, in short, to keep a clear mind, distinguish how to calculate the various heights of relations.
In figure I, I used a blue vertical bar to assist in height calculations, with red lines indicating the position of the screen and elements, dividing the blue vertical bar into a, B, C, D, E, F, six paragraphs. So what are the changes in the number of relationships between them? (we define the elements of the Green Zone as #mydiv and define the bottom of the copyright information as #footer)
a+b+c+d+e+f=$ (document). Height ();//Document Heights, fixed values
Copy Code code as follows:
A= $ (' #myDiv '). Offset (). top;//#myDiv顶部到文档顶部的初始值, with scrolling, $ (' #myDiv '). Offset (). Top will change
b=$ (' #myDiv '). Height ();
a+b+c=$ (window). scrolltop () =$ (docment). ScrollTop ()//The position of the scroll bar, which is the distance from the top of the document to the top of the current screen, changing
d=$ (window). height ();//Screen heights, fixed values
f=$ (' #footer '). Height ();//#footer的高度, fixed value
a+b+c+d+e=$ (' #footer '). Offset (). top=$ (document). Height ()-$ (' #footer '). Height ();//#footer顶部到文档顶部的距离, fixed value, However, it is important to note that $ (' #footer '). Offset (). top+$ (' #footer '). Height () is not necessarily equal to $ (document). Height (), you want to see if there is no white space underneath the #footer.
Throughout the change, the value of the change is only $ (window). scrolltop () =$ (docment). ScrollTop () and $ (' #myDiv '). Offset (). Top, so we have to catch the addition and decrease quantity relationship between these values, Make logical judgments and assign values.
4. When will the value be obtained?
As you can see, I got the prior scroll event
Copy Code code as follows:
var $catalogueOffsetTop = $ (' aside#catalogue '). Offset (). Top;
var $archiveOffestTop = $ (' aside#archive '). Offset (). Top;
var $archiveOffestLeft = $ (' aside#archive '). Offset (). Left;
It is because they change during the scroll event that they are stored in the variable in advance.
Iv. Special Considerations
Before I wrote so many code, I thought about writing a generic code, but it wasn't that simple, and in the case of the Black gang, three of the areas to be scrolled were special, so they had to be carefully considered for their event logic and careful assignment.
1. Is the element free and optional
Because the area that appears when Wushi double clicks on the right side of the screen is free, there is no blocking information at the top and bottom, so our processing is more convenient, without getting the initial value of the top distance and considering rolling to the bottom for a period of time and space. But still consider the following 2nd, screen and element height comparison.
And for the side sidebar to roll, we have to consider the sidebar top to the top of the document there is a distance, the bottom also has copyright information. The location of the scroll is calculated with the value obtained above and the value obtained in the CSS.
2. Determine the relationship between the height of the element and the height of the screen
When the element height is small, our process is relatively simple, just want to align the top of the element and the top of the screen, and the 1th combination, there will be a different situation: if the elements at the top of the document at the top of a distance, we can not start the screen as soon as scrolling to the top of the screen to align, And it has to be rolled to the top of the tipping point before it can begin.
And when the height of the element is greater than the height of the screen, we need to make more complex judgments and when the 1th judgment starts to follow the scroll: The elements begin to follow the screen scrolling only when the bottom of the screen is aligned with the bottom of the element.
But there is also a situation where the height of the element is beyond the height we want, and we can use overflow to process the element, when we deal with it by comparing the height of the element with some fixed values in the page. Wushi handles overflow by comparing the relationship between the height and bottom of the right element:
Copy Code code as follows:
......
}else if ($ (' #right-area '). Height () >= ($ (' footer '). Offset (). Top + $ (' footer '). Height ()) {
$ (' #right-area '). Height ($ (' footer '). Offset (). Top + $ (' footer '). Height ()). Stop (true,true). css ({' Overflow ': ' Hidden ', ' overflow-y ': ' scroll '});
}
3, the special situation of their own web page changes
Wushi because it can also scroll around, resulting in a series of problems, position:fixed in the left and right direction of the element distance does not have a fixed value, so when scrolling around, the element will cover the scrolling screen, so I also to $ (document). ScrollLeft () was judged and some processing was done.
In addition, Wushi is an adaptive web design site, the different width of the screen display the effect is also different, JS is the characteristic of the screen when the changes still work, so I also increased the judgment of the screen width.
Summarize
In following the issue of screen scrolling, the original idea is very simple, that is, through the three scenarios listed in the position or distance of the dynamic change, however, in order to grasp the specific details, we must be in the dynamic changes in the values of the grasp. At the same time, combined with their own web pages, the dynamic effects of different situations have a good design and planning, but also to achieve the key link to follow the screen scrolling.
