jquery follows the screen scrolling code

We see on many websites that when we scroll the page, the ads or a small area of the page do not disappear, but float somewhere on the screen, especially some local ads. So how does this come true? This article will refer to Wushi's following screen scrolling code to explain this effect.

First, the original code

Below is the Wushi's follow-up screen scrolling code, which is scoped to the sidebar on both sides of the help page and the hidden bar on the right after double-clicking the screen.

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 Follow-up screen scrolling effect
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 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) {//only follow the following scrolling when the screen is on the left, and note the following if ($ (window). Width () > 1024), is to prevent this change from happening on a small screen.
Aside#catalogue swipe up and down
if ($ (' Aside#catalogue '). Outerheight () < $ (window). Height ()) {
if ($ (document). ScrollTop () <= $catalogueOffsetTop) {
$ (' Aside#catalogue '). css ({' position ': ' Static ', ' Top ': $catalogueOffsetTop});
if ($ (window). Width () > 1024x768) $ (' #main '). css ({' padding-left ': ' 0 '});
}else{
$ (' Aside#catalogue '). css ({' position ': ' fixed ', ' top ': ' 0 '});
if ($ (window). Width () > 1024x768) $ (' #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 () > 1024x768) $ (' #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 () > 1024x768) $ (' #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 () > 1024x768) $ (' #main '). css ({' Padding-left ': $ (' Aside#catalogue '). Outerwidth () + 5 + ' px '});
}
}
Aside#archive swipe 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, let the two follow the homing
$ (' 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 7 lines of code to solve this problem, and even Universal plug-ins to achieve this effect. However, they are too pervasive, for different sites, the particularity of different, in some details to do more consideration.

Second, choose what way to follow the screen scrolling

There are three types of scenarios:

1, the use of Position:absolute, and then the top value of dynamic assignment;
2, the use of position:fixed, and then the top value of dynamic assignment;
3, the dynamic assignment of padding-top or margin-top;

The first two use postion to arrange the position of the element, and float, as position, drags the element out of the normal text stream. The method for padding or margin is to control the margin of the element. What kind of good is it?

Using Position:absolute, jitter will occur when scrolling (not in Firefox), when using Padding-top, the elements with backgrounds will look ugly, jitter will occur, and position:fixed does not support IE6. With Margin-top not tried, jitter should occur. This code selects Position:fixed, the only scenario that does not occur, but does not have this effect under IE6.

Iii. circumstances to be considered

The reason why the Ukrainian help to take the code out of the site to explain, because the online code is not specific analysis, many problems are not considered.

1. The height of the element to follow is compared to the height of the screen

All the code on the net considers that the height of the area is less than the height of the window, so the code is simple. When the height of the area is equal to or greater than the height of the window, we have new considerations.

2. If the area height exceeds the window, when will it start to follow the scroll?

It depends on what we want to show the user, if it's an ad, if it's a text, if it's a list. My design is that when the screen scrolls down, but not all the elements that are going to be displayed intact, without any effect, when the screen scrolls to the bottom of the element, the effect fires, 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 present in the screen. Of course, different Web pages, your design is naturally different, you may also design for, scroll down when the first no effect, when scrolling to an ad, this ad and screen top alignment followed by scrolling.

Figure one follows the screen to scroll the logical design diagram

Let's take a look at this design idea in figure A. The green part of the figure is the area to follow, the gray part is the entire page, the light gray section is the screen (the area that can be seen), and we simulate scrolling down the scroll bar by moving the light gray screen down. At the beginning of the ① phase, this time the Web page was initially operating without any action. To the ② stage, the screen scrolls down to a critical point, which is to follow the lowest end of the scrolling region. The ③ stage is that after the critical point has been scrolled, the element starts to follow the screen 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. In the ④ stage of the screen scrolling to the bottom, you can imagine that there is some copyright information at the base of the Web page, elements can not follow the scroll to the end to cover the information, so where the red Line no longer follow the scrolling.

This is the screen scrolling down, and when the screen is scrolling up, this is the reverse of this order. But there is another consideration, when the screen is scrolling up and down the initial shape, that is, the critical point is at 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, number and amount of calculation

In the rolling, we have to grasp the quantity is the change, which does not change, in the same change, in the change to find the same, in short, to maintain a clear mind, how to calculate the height of the relationship.

In figure I, I used a blue vertical bar to assist in height calculations, indicating the position of the screen and element with a red line, and dividing the blue vertical bar into a, B, C, D, E, f six segments. 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 ();//file altitude, fixed value

A= $ (' #myDiv '). Offset (). top;//#myDiv顶部到文档顶部的初始值, with scrolling, $ (' #myDiv '). Offset (). Top will change

b=$ (' #myDiv '). Height ();//The altitude of the element, fixed value

a+b+c=$ (window). scrolltop () =$ (docment). scrolltop ();//The position of the scroll bar, that is, the distance from the top of the document to the top of the current screen, constantly changing

d=$ (window). height ();//screen altitude, fixed value

f=$ (' #footer '). Height ();//#footer的高度, fixed value

a+b+c+d+e=$ (' #footer '). Offset ()-top=$ (document). Height ()-$ (' #footer '). Height ();//#footer顶部到文档顶部的距离, fixed value, It is important to note, however, that $ (' #footer '). Offset (). top+$ (' #footer '). Height () is not necessarily equal to $ (document). Height (), you have to see if there is no space below #footer.

Over the course of the change, the value of the change is only $ (window). scrolltop () =$ (docment). ScrollTop () and $ (' #myDiv '). Offset (). Top, so we're going to grab the number-plus-minus relationship between these values, Make logical judgments and assign values.

4. When is the value obtained?

As you can see, I got it in advance before the scroll incident.

var $catalogueOffsetTop = $ (' aside#catalogue '). Offset (). Top;
var $archiveOffestTop = $ (' aside#archive '). Offset (). Top;
var $archiveOffestLeft = $ (' aside#archive '). Offset (). Left;

It is because they change when the scroll event occurs that they are stored in the variable in advance.

Iv. special circumstances and special considerations

Before writing so much code, I wanted to write a generic code, but it's not that simple, and in the case of the Ukrainian, three of the areas to scroll are special, so it's important to think carefully about their event logic and carefully assigned values.

1. Whether the element is free or arbitrary

Since Wushi double-click the screen to slide to the right, the area that appears is free, the top and bottom have no blocking information, so our processing is more convenient, without having to get the initial value of the top distance and consider rolling to the bottom of space-time. But still consider the following 2nd, screen and element height comparison.

For the side bar to roll, we have to consider the top of the sidebar to the top of the document there is still a distance, the bottom of the copyright information. The position to be scrolled is calculated using the values obtained above, and then with the values 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 processing is relatively simple, just want to align the top of the element with the top of the screen, and the above 1th combination, there will also be different situations: if the element top to the top of the document there is still a distance, we can not start the screen as soon as the scroll to align with the top of the screen, And you have to roll it to the top of the threshold before you can start.

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 begins to follow the scroll: The element starts to follow the screen when the bottom of the screen is aligned with the bottom of the element.

But there is also the case that the height of the element exceeds the height we want, and we can use the overflow to manipulate the element, which is handled by the height of the element and by a comparison of some fixed values in the page. Wushi handles overflow by comparing the height of the right element to the bottom of the relationship:

......
}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 changes in the special circumstances of their own web pages

Wushi because the left and right can also be scrolled, resulting in a series of problems, position:fixed the distance between the elements in the direction and left no fixed value, so in the left and right scrolling, the element will cover the scrolling screen, so I again on $ (document). ScrollLeft () was judged and carried out some processing.

In addition, Wushi is also a self-adaptive web design site, the different width of the screen display of different effects, JS is characterized when the screen changes still work, so I also increased the screen width of the judgment.

Summarize

In following the screen scrolling this problem, the original idea is very simple, that is, through the three scenarios enumerated in this article for the location or distance of the dynamic change, however, in order to grasp the specific details, we must be in the dynamic changes in the various values are certain. 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 follow the screen scrolling key link.

Text: Follow the screen scrolling code

jquery follows the screen scrolling code