As we can see on many websites, when we scroll the webpage, the advertisement or a small area in the webpage will not disappear, but will float somewhere on the screen, in particular, how can we implement some local advertisements? This article will reference the code that follows the screen scroll of the utubang, to explain the effect.
I. Original code
The following is the screen-scrolling code of wutubang. Its scope is the sidebar on both sides of the webpage and the hidden sidebar on the right side after double-clicking the screen.
The Code is 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 (){
// # The scroll Effect of right-area following the screen
If ($ ('# right-area'). height () <= $ (window). height ()){
$ ('# Right-Region '). stop (true, true ). animate ({'top': $ (document ). scrollTop () + 'px '}, 800 );
} Else if ($ ('# right-area '). height ()> $ (window ). height () & $ ('# right-area '). height () <$ (document ). height ()){
// This range is the most critical. Slide is allowed.
If ($ (document). scrollTop () + $ (window). height () <= $ ('# right-area'). height ()){
Certificate ('{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 ();
Certificate ('{right-area'{.stop(true,true}.css ({'top': $ right_top + 'px '});
// Alert ($ (document). scrollTop () + $ (window). height ()-$ (document). height ());
}
} Else if ($ ('# right-Region'). height () >=$ (document). height ()){
Certificate ('{right-area'{.height({document}.height({}.stop(true,true}.css ({'overflow': 'hid', 'overflow-y': 'scroll '});
}
If ($ (document ). scrollLeft () = 0) {// follow the scroll below only when the screen is left. Pay attention to the if ($ (window) below ). width ()> 1024) is used to prevent this change in the small screen.
// Aside # Slide up and down of catalogue
If ($ ('aside # catalogue '). outerHeight () <$ (window). height ()){
If ($ (document). scrollTop () <= $ catalogueOffsetTop ){
Certificate ('aside=catalogue'}.css ({'position': 'static ', 'top': $ catalogueOffsetTop });
If ($ (window). width ()> 1024)(('{main'}.css ({'padding-left': '0 '});
} Else {
Certificate ('aside=catalogue'hangzhou.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 )){
Certificate ('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;
Certificate ('aside=catalogue'hangzhou.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 ()-20-($ (document ). height ()-$ ('footer '). offset (). top );
Certificate ('aside=catalogue'hangzhou.css ({'position': 'fixed', 'top': $ catalogue_top + 'px '});
If ($ (window ). width ()> 1024)(('{main'}.css ({'padding-left': $ ('aside # catalogue '). outerWidth () + 5 + 'px '});
}
}
// Aside # sliding up and down of archive
If ($ ('aside # archive '). outerHeight () <$ (window). height ()){
If ($ (document). scrollTop () <= $ archiveOffestTop ){
Certificate ('aside1_archive'}.css ({'position': 'static ', 'top': $ archiveOffestTop, 'left': $ archiveOffestLeft + 'pxy '});
} Else {
Parameters ('aside=archive'hangzhou.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 )){
Certificate ('aside1_archive'}.css ({'position': 'static ', 'top': $ archiveOffestTop, 'left': $ archiveOffestLeft + 'pxy '});
} Else if ($ (document). scrollTop () + $ (window). height () <$ ('footer '). offset (). top ){
$ Catalogue_top = $ (window). height ()-$ ('aside # archive'). outerHeight ();
Certificate ('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 );
Certificate ('aside=archive'}.css ({'position': 'fixed', 'top': $ catalogue_top + 'px ', 'left': $ archiveOffestLeft + 'px '});
}
}
} Else {// If the screen is not on the left, set the two to the same position.
Certificate ('aside=catalogue'}.css ({'position': 'static ', 'top': $ catalogueOffsetTop });
Certificate ('privacy main'privacy .css ({'padding-left': '0 '});
Certificate ('aside1_archive'}.css ({'position': 'static ', 'top': $ archiveOffestTop, 'left': $ archiveOffestLeft + 'pxy '});
}
}). Scroll (). resize ();
There are a lot of related code on the network, and there are seven lines of code to solve this problem, and there are even universal plug-ins to achieve this effect. However, they are too generic. For different websites with different particularity, we need to consider more details.
Ii. How to scroll the screen
There are three solutions:
1. Use position: absolute, and dynamically assign values to the top values;
2. Use position: fixed, and dynamically assign values to the top values;
3. dynamically assign values to padding-top or margin-top;
Both of them use postion to arrange the position of the element. Like float, position will drag the element out of the normal text stream. The padding or margin Method controls the margin of elements. Which one is better?
Use position: absolute; jitter occurs when rolling occurs (Firefox does not). When padding-top is used, background elements may look ugly and jitter occurs. Use position: fixed does not support IE6. It has not been tried using margin-top and should be jittery. The code in this Section selects position: fixed, which is the only solution without jitter. However, IE6 does not have this effect.
Iii. Considerations
The reason for utu help to explain the code on this site is that the Code on the Internet is not analyzed in detail and many problems are not taken into consideration.
1. Compare the height of the elements to be followed with the screen height
All the code on the Internet considers that the height of the area is smaller than the window height, so the code is very simple. When the area height is equal to or greater than the window height, we will have new considerations.
2. If the area height exceeds the window, when will the scroll start?
It depends on what we want to display to users. If it is an advertisement, if it is a piece of text, if it is a list. My design is that when the screen is scroll down, but no elements to be displayed are completely displayed, no effect will be performed. When the screen is scrolled to the critical position at the bottom of the element, when the effect is triggered and then scroll down, the bottom of the element is aligned with the bottom of the screen, and the bottom of the element is always displayed on the screen. Of course, different web pages naturally have different designs. You may also be designed to have no effect when you scroll down. When you scroll down to an advertisement, the advertisement and the top of the screen are aligned and follow the scroll.
Logical design drawing following screen scrolling
Let's take a look at this design idea. In the figure, the green part is the area that will follow the scroll, the gray part is the whole page, and the light gray part is the screen (the area that can be seen). We move down the light gray screen to simulate scroll down the scroll bar. In the initial phase of ①, all the webpage operations are taken as initial operations without any action. To the second stage, the screen will scroll down to a critical point, that is, to follow the lowest end of the rolling area. The third stage is that after the elements scroll through the critical point, the elements start to scroll along the screen. We can see that the bottom of the element is aligned with the bottom of the screen, and the top of the element is invisible. In the fourth stage, the screen scroll to the bottom. As you can imagine, some copyright information exists at the bottom of the webpage, and elements cannot be rolled to the bottom to cover the information, therefore, the scroll will not be followed in the red line.
This is the scroll down of the screen. This is the reverse order when the screen is scroll up. However, there is another consideration. When the screen is scrolled up, the initial effect is realized and rolled down. That is, the critical point is the top of the green area in ④, align the top of the screen with the top of the element when you scroll up. Due to technical difficulty, Wu tubang did not achieve this effect.
3. Calculation of quantity and quantity
During the rolling process, we need to know the changes in the volume, which remain unchanged, while looking for changes in the constant and changing. In short, we need to keep our mind clear, determine how to calculate various high relationships.
In the middle, I used a blue vertical line to help calculate the height, and used a red line to indicate the position of the screen and elements, the blue vertical bars are divided into segments a, B, c, d, e, and f. So what are the changing quantitative relationships between them? (We define the elements in the green area as # myDiv and the bottom part of the copyright information as # footer)
A + B + c + d + e + f = $ (document). height (); // document height, fixed value
The Code is as follows:
A = $ ('# myDiv '). offset (). top; // # The initial value from the top of myDiv to the top of the document. As you scroll, $ ('# myDiv '). offset (). top will change
B = $ ('# myDiv'). height (); // height 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.
D = $ (window). height (); // screen height, fixed value
F = $ ('# footer'). height (); // # footer height, fixed value
A + B + c + d + e =$ ('# footer '). offset (). top = $ (document ). height ()-$ ('# footer '). height (); // # The distance from the top of footer to the top of the document, fixed value, but note that $ ('# footer '). offset (). top + $ ('# footer '). height () is not necessarily equal to $ (document ). height (). You need to check whether there is no blank space in the footer.
During the entire change process, the changed value is only $ (window ). scrollTop () = $ (docment ). scrollTop () and $ ('# myDiv '). offset (). therefore, we need to grasp the relationship between the addition and subtraction numbers between these values to make logical judgments and assign values.
4. When to obtain the value
As you can see, I got it before the scroll event
The Code is as follows:
Var $ catalogueOffsetTop = $ ('aside # catalogue '). offset (). top;
Var $ archiveOffestTop = $ ('aside # archive'). offset (). top;
Var $ archiveOffestLeft = $ ('aside # archive'). offset (). left;
It is precisely because they will change when the scroll event occurs that they should be stored in the variable in advance.
4. Special Considerations
Before writing so much code, I once thought about writing a common code. However, this is not so simple. In the wutu gang, all three areas to be rolled have special characteristics, therefore, we must carefully consider their Event Logic and assign values carefully.
1. are elements free of choice?
As the area displayed when the screen slides to the right by double-clicking the port is free, the top and bottom of the screen do not block information, so our processing is more convenient, you do not need to get the initial value of the top distance and consider rolling to the bottom to get a segment. However, we still need to consider the comparison between the screen and the element height at the following 2nd points.
For the rolling of the sidebar, we need to consider that there is still a distance from the top of the sidebar to the top of the document, and there is copyright information at the bottom. You can use the value obtained above to accurately calculate the position to be rolled in combination with the value obtained in css.
2. determine the relationship between the element height and the screen height.
When the element height is small, our processing is relatively simple. We only need to align the top of the element and the top of the screen, and combine it with the top 1st points, there will also be different situations: if there is still a gap between the top of the element and the top of the document, we can't start to align it with the top of the screen as soon as the screen is rolled, but it can only start when it is rolled to the top of the screen.
When the height of an element is greater than the screen height, we need to make more complex judgments, and determine when to start to follow the scroll at: only when the bottom of the screen and the bottom of the element are aligned, the element starts to scroll along with the screen.
However, there is another case where the height of the element exceeds the height we want. We can use overflow to process the element, in this case, we can compare the element height with some fixed values on the page to deal with this link. Compared with the relationship between the height of the right element and the bottom of the element, utu gang performs overflow processing:
The Code is as follows:
......
} Else if ($ ('# right-area '). height ()> = ($ ('footer '). offset (). top + $ ('footer '). height ())){
$ ('# Right-Region '). height ($ ('footer '). offset (). top + items ('footer'{.height({}.stop(true,true}.css ({'overflow': 'hidden ', 'overflow-y': 'scroll '});
}
3. Changes in special situations on your webpage
As the left and right sides can still scroll, a series of problems are generated. The distance between the elements in the left and right directions of position: fixed is not fixed. Therefore, when the left and right sides are rolled, the elements will cover the scrolling screen, so I am directed to $ (document ). scrollLeft () is judged and processed.
In addition, wutubang is a self-adaptive Web Design website with different display effects on screens of different widths. js features that it still works when the screen changes. Therefore, I also added the screen width judgment.
Summary
On the issue of following screen scrolling, the original idea is very simple, that is, to dynamically change the position or distance through the three solutions listed in this article. However, we must grasp the specific details, the values in the dynamic change must be certain. At the same time, combined with their own web pages, there is a good design and planning of the dynamic effects under different circumstances, is also a key link to achieve the following screen scrolling.
