Kami telah melihat di banyak tapak web bahawa apabila kami menatal halaman web, iklan atau kawasan kecil tertentu dalam halaman web tidak hilang, tetapi terapung di suatu tempat pada skrin, terutamanya beberapa iklan tempatan. Jadi bagaimana ini dicapai? Artikel ini akan memetik kod skrol skrin ikut Wutu Bang untuk menerangkan kesan ini secara terperinci.
1. Kod asal
Berikut ialah kod tatal skrin Wutu Bang Skopnya ialah bar sisi pada kedua-dua belah halaman web Wutu Bang, serta bar tersembunyi di sebelah kanan selepas mengklik dua kali pada skrin.
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();
Terdapat banyak kod berkaitan di Internet, termasuk 7 baris kod untuk menyelesaikan masalah ini, malah pemalam universal untuk mencapai kesan ini. Walau bagaimanapun, mereka semua terlalu umum laman web yang berbeza mempunyai kekhususan yang berbeza, dan lebih banyak pertimbangan perlu dibuat dalam beberapa butiran.
2 Pilih cara menatal dengan skrin
Terdapat tiga pilihan:
1 Gunakan position:absolute; dan kemudian tetapkan nilai teratas secara dinamik;
2. Gunakan position:fixed; dan kemudian tetapkan nilai teratas secara dinamik;
3. Tetapkan padding-top atau margin-top secara dinamik;
Dua yang pertama menggunakan kedudukan untuk mengatur kedudukan elemen Seperti apungan, kedudukan menyeret elemen keluar daripada aliran teks biasa. Kaedah padding atau margin dicapai dengan mengawal margin elemen. Mana satu lebih baik?
3. Situasi yang perlu dipertimbangkan
Sebab mengapa Geng Wutu ingin menjelaskan kod laman web ini adalah kerana tiada analisis terperinci kod di Internet, dan banyak isu tidak dipertimbangkan.
1. Bandingkan ketinggian elemen yang akan diikuti dengan ketinggian skrinSemua kod di Internet mempertimbangkan situasi di mana ketinggian kawasan kurang daripada ketinggian tingkap, jadi kod itu sangat mudah. Apabila ketinggian kawasan sama dengan dan lebih besar daripada ketinggian tingkap, kami mempunyai pertimbangan baharu.
2. Jika ketinggian kawasan melebihi tingkap, bilakah ia akan mula mengikuti penatalan?
Ia bergantung pada apa yang kita mahu tunjukkan kepada pengguna, jika ia adalah iklan, jika ia adalah perenggan teks, jika ia adalah senarai. Reka bentuk saya ialah apabila skrin menatal ke bawah, tetapi semua elemen yang akan dipaparkan belum dipaparkan sepenuhnya, tiada kesan akan dilakukan Apabila skrin menatal ke titik kritikal bahagian bawah elemen, kesannya akan dicetuskan sekali lagi, bahagian tepi bawah elemen dijajarkan dengan tepi bawah skrin, supaya bahagian bawah elemen sentiasa dipaparkan dalam skrin. Sudah tentu, reka bentuk anda secara semula jadi akan berbeza untuk halaman web yang berbeza Anda juga boleh mereka bentuknya supaya ia tidak mempunyai kesan apabila menatal ke bawah Apabila anda menatal ke iklan, iklan akan diselaraskan dengan bahagian atas skrin dan tatal bersama.
Rajah 1 Ikut reka bentuk logik skrol skrin
Ini ialah gambarajah skematik skrin menatal ke bawah Apabila skrin menatal ke atas, ini adalah terbalik bagi jujukan ini. Tetapi terdapat pertimbangan lain Apabila skrin menatal ke atas, ia mencapai kesan yang sama seperti tatal awal ke bawah Iaitu, titik kritikal adalah bahagian atas kawasan hijau dalam ④ pada masa ini skrin diselaraskan dengan bahagian atas elemen. Disebabkan masalah teknikal, Geng Wutu tidak mencapai kesan ini.
3. Pengiraan nombor dan kuantiti
Apabila menatal, kita mesti memahami kuantiti yang berubah dan yang tidak berubah, mencari perubahan dalam pemalar, dan mencari pemalar dalam perubahan Secara ringkasnya, kita mesti menyimpan fikiran yang jelas dan membezakan cara mengira pelbagai hubungan ketinggian. .
Dalam Rajah 1, saya menggunakan garis menegak biru untuk membantu dalam pengiraan ketinggian, menggunakan garis merah untuk menunjukkan kedudukan skrin dan elemen, dan membahagikan garis menegak biru kepada a, b, c, d, e, f Enam perenggan. Jadi apakah hubungan kuantitatif yang berubah antara mereka? (Kami mentakrifkan elemen dalam kawasan hijau sebagai #myDiv dan bahagian bawah termasuk maklumat hak cipta sebagai #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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
