We have seen on many websites that when we scroll the web page, the advertisements or a certain small area within the web page do not disappear, but float somewhere on the screen, especially some local advertisements. So how is this achieved? This article will quote Wutu Bang’s follow-screen scrolling code to explain this effect in detail.
1. Original code
The following is Wutu Bang’s screen scrolling code. Its scope is the sidebars on both sides of Wutu Bang’s web page, as well as 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的跟随屏幕滚动效果
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()){
// 这段范围内是最关键的，允许滑动
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){ // 只有在屏幕处于左侧的时候才进行下面的跟随滚动，同时需要注意下面的if($(window).width() > 1024)，是为了防止在小屏幕下还发生这种变化
// aside#catalogue的上下滑动
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() - 20 - ($(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的上下滑动
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{ // 如果屏幕不处于左侧，就让这两个跟随归位
$('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 codes on the Internet, including 7 lines of code to solve this problem, and even universal plug-ins to achieve this effect. However, they are all too general. Different websites have different particularities, and more considerations need to be made in some details.
2. Choose how to scroll with the screen
There are three options:
1. Use position:absolute; and then dynamically assign the top value;
2. Use position:fixed; and then dynamically assign the top value;
3. Dynamically assign padding-top or margin-top;
The first two use postion to arrange the position of elements. Like float, position drags elements out of the normal text flow. The padding or margin method is achieved by controlling the margin of the element. Which one is better?
Using position:absolute; will cause jitter when scrolling (not in Firefox). When using padding-top, elements with backgrounds will look ugly and jitter will occur. Using position:fixed does not support IE6. Use I haven't tried margin-top, it should jitter. This code selects position:fixed, which is the only solution that does not cause jitter, but this effect will not occur under IE6.
3. Situations to consider
The reason why Wutu Gang wants to explain the code of this website is because there is no detailed analysis of the code on the Internet, and many issues are not considered.
1. Compare the height of the element to be followed with the height of the screen
All the codes on the Internet consider the situation that the height of the area is less than the height of the window, so the code is very simple. When the area height is equal to and greater than the window height, we have new considerations.
2. If the height of the area exceeds the window, when will it start to follow the scrolling?
It depends on what we want to show the user, if it is an advertisement, if it is a paragraph of text, if it is a list. My design is that when the screen scrolls down, but all the elements to be displayed have not been fully displayed, no effect will be performed. When the screen scrolls to the bottom critical point of the element, the effect is triggered. When scrolling down again, the element's The bottom edge is aligned with the bottom edge of the screen, so that the lower part of the element is always rendered within the screen. Of course, your design will naturally differ for different web pages. You may also design it so that there is no effect when scrolling down. When you scroll to an ad, the ad will be aligned with the top of the screen and scroll.
Figure 1 Follow the screen scrolling logic design
Let’s take a look at this design idea from Figure 1. The green part in the picture is the area to be scrolled, the gray part is the entire web page, and the light gray part is the screen (the area that can be seen). We simulate scrolling down by moving the light gray screen downwards. Stage ① is the initial stage. At this time, the web page operates as it was initially without any action. At stage ②, the screen scrolls down to a critical point, that is, it follows the lowest end of the scrolling area. Stage ③ is after scrolling past the critical point, the element begins to scroll with 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 no longer visible. In the fourth stage, the screen scrolls to the bottom. It can be imagined that there is some copyright information at the bottom of the web page. The elements cannot follow the scroll to the bottom to cover this information, so the red line will no longer follow the scroll.
This is a schematic diagram of the screen scrolling down. When the screen scrolls up, this is the reverse of this sequence. But there is another consideration. When the screen scrolls up, it achieves the same effect as the initial scroll down. That is, the critical point is the top of the green area in ④ at this time. When scrolling up, the top of the screen is aligned with the top of the element. Due to technical difficulties, Wutu Gang did not achieve this effect.
3. Calculation of numbers and quantities
When scrolling, we must grasp which quantities change and which do not change, find changes in the constants, and find the constants in the changes. In short, we must keep a clear mind and distinguish how to calculate various height relationships. .
In Figure 1, I used a blue vertical line to assist in height calculation, used a red line to indicate the position of the screen and elements, and divided the blue vertical line into a, b, c, d, e, f Six paragraphs. So what are the changing quantitative relationships between them? (We define the elements in the green area as #myDiv and the bottom including the copyright information as #footer)
a+b+c+d+e+f=$(document).height();//文档高度，固定值
a= $('#myDiv').offset().top;//#myDiv顶部到文档顶部的初始值，随着滚动，$('#myDiv').offset().top将会变化
b=$('#myDiv').height();//元素的高度，固定值
a+b+c=$(window).scrollTop()=$(docment).scrollTop();//滚动条的位置，即文档顶端到当前屏幕顶端的距离，不断变化中
d=$(window).height();//屏幕的高度，固定值
f=$('#footer').height();//#footer的高度，固定值
a+b+c+d+e=$('#footer').offset().top=$(document).height()-$('#footer').height();//#footer顶部到文档顶部的距离，固定值，不过需要注意的是，$('#footer').offset().top+$('#footer').height()并非一定等于$(document).height()，你要看#footer下面是否已经没有了空白。
在整个变化过程中，变化的值只有$(window).scrollTop()=$(docment).scrollTop()和$('#myDiv').offset().top，因此我们要抓住这些值之间的加减数量关系，做好逻辑判断和赋值。
4、值在什么时候获取
你可以看到，我在scroll事件之前事先获取了
var $catalogueOffsetTop = $('aside#catalogue').offset().top;
var $archiveOffestTop = $('aside#archive').offset().top;
var $archiveOffestLeft = $('aside#archive').offset().left;
正是由于他们在scroll事件发生时会发生变化，因此要提前存放在变量中。
四、特殊情况特殊考虑
在写出这么多代码之前，我曾想过写出一个可以通用的代码，然而事情并非那么简单，在乌徒帮中，三个要滚动 的区域都具有特殊性，因此必须认真考虑他们的事件逻辑和仔细赋值。
1、元素是否自由随意
由于乌徒帮双击屏幕滑向右侧时出现的区域是自由的，顶部和底部没有阻挡信息，因此我们的处理更方便一些，不用获取顶部距离的初始值和考虑滚到底部时空出一段。但是仍然要考虑下面第2点，屏幕和元素高度的比较。
而对于边侧栏的滚到，我们要考虑边侧栏顶部到文档顶部还有一段距离，底部还有版权信息。滚到的位置要通过上文获得的值，再配合css中获得的值进行精确计算。
2、判断元素的高度和屏幕高度之间的关系
当元素高度小的时候，我们的处理比较简单，只需要将元素顶端和屏幕顶端对齐，和上面第1点结合，也会出现不同的情况：如果元素顶部到文档顶部还有一段距离的话，我们还不能屏幕一滚动就开始让它和屏幕顶端对齐，而必须滚到它的顶端这个临界点的时候才可以开始。
而当元素的高度大于屏幕的高度的时候，我们要进行更复杂的判断，和第1点判断何时开始跟随滚动：只有当屏幕的底端和元素底端对齐时，元素开始跟随屏幕滚动。
但是还有一种情况，即元素的高度超出了我们想要的高度，我们可以使用overflow来对元素进行处理，这时我们通过元素的高度和页面中一些固定值的比较来处理这一环节。乌徒帮通过比较右侧元素的高度和底部的关系来进行overflow的处理：
......
}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、自己网页内特殊情况的变化
乌徒帮由于左右还可以滚动，因此产生了一系列问题，position:fixed时左右方向上元素的距离并没有固定值，因此在进行左右滚动时，元素会遮住滚动完的屏幕，因此我又对$(document).scrollLeft()进行了判断，进行了一些处理。
另外，乌徒帮还是一个自适应的网页设计网站，在不同宽度的屏幕上显示的效果也不同，js的特点是当屏幕发生变化时仍然起作用，因此，我也增加了屏幕宽度的判断。
总结
在跟随屏幕滚动这个问题上，原始的思路是很简单的，即通过本文列举的三种方案进行位置或距离的动态改变，然而，要在具体细节上把握好，必须对动态变化中的各个数值有所把握。于此同时，结合自己的网页，对不同情况下的动态效果有一个好的设计和规划，也是实现跟随屏幕滚动的关键环节。
以上这篇jquery跟随屏幕滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
