jquery は画面スクロール効果の実装 code_jquery に従います-jsチュートリアル-php.cn

多くの Web サイトで、Web ページをスクロールすると、広告や Web ページ内の特定の小さな領域が消えず、画面上のどこか、特に一部のローカル広告に浮かんでいるのを目にしました。では、これはどのようにして達成されるのでしょうか?この記事では、Wutu Bang のフォロースクリーンスクロールコードを引用して、この効果を詳しく説明します。

1. 元のコード

以下は、Wutu Bang の画面スクロールコードです。その範囲は、Wutu Bang の Web ページの両側にあるサイドバーと、画面をダブルクリックした後の右側の隠しバーです。

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();

ログイン後にコピー

インターネット上には、この問題を解決する 7 行のコードや、この効果を実現するユニバーサルプラグインなど、関連するコードが多数あります。ただし、これらはすべて一般的すぎるため、Web サイトごとに異なる特徴があり、詳細についてはさらに考慮する必要があります。

2. 画面のスクロール方法を選択します

3 つのオプションがあります:

1.position:absolute; を使用して、先頭の値を動的に割り当てます。 2.position:fixed; を使用して、上部の値を動的に割り当てます。 3. padding-top または margin-top を動的に割り当てます。
最初の 2 つは、float と同様に、position を使用して要素の位置を調整し、通常のテキストフローから要素をドラッグします。パディングまたはマージン方法は、要素のマージンを制御することによって実現されます。どちらが良いでしょうか？

position:absolute; を使用すると、スクロール時にジッターが発生します (Firefox では発生しません)。 margin-top を試してみましたが、ジッターするはずです。このコードは、ジッターを発生させない唯一の解決策であるposition:fixedを選択しますが、この影響はIE6では発生しません。

3. 考慮すべき状況

Wutu Gang がこの Web サイトのコードを説明したい理由は、インターネット上でコードの詳細な分析がなく、多くの問題が考慮されていないためです。

1. フォローする要素の高さと画面の高さを比較します

インターネット上のすべてのコードは、領域の高さがウィンドウの高さよりも低い状況を考慮しているため、コードは非常に単純です。エリアの高さがウィンドウの高さと同じかそれより大きい場合、新たな考慮事項が必要になります。

2. エリアの高さがウィンドウを超える場合、いつからスクロールを開始しますか?

それは、広告であるか、テキストの段落であるか、リストであるかなど、ユーザーに何を表示したいかによって異なります。私の設計では、画面が下にスクロールしても、表示されるすべての要素が完全に表示されていない場合、画面が要素の一番下の重要なポイントまでスクロールすると、効果がトリガーされます。繰り返しますが、要素の下端は画面の下端に揃えられるため、要素の下部は常に画面内にレンダリングされます。もちろん、Web ページごとにデザインが異なるのは当然です。また、広告を下にスクロールしたときに、広告が画面の上部に合わせてスクロールされるようにデザインすることもできます。

図 1 画面スクロールのロジック設計に従います

図 1 からこの設計アイデアを見てみましょう。図の緑色の部分がスクロールする領域、灰色の部分がWebページ全体、薄い灰色の部分が画面（見える範囲）です。薄い灰色の画面を下に移動することで、下にスクロールすることをシミュレートします。。段階①は初期段階です。この時点では、Web ページは何もせずにそのまま動作します。段階②では、画面が臨界点までスクロールダウンします。つまり、スクロール領域の下端に沿ってスクロールします。段階③は、スクロールが臨界点を超えた後、要素が画面とともにスクロールし始め、要素の下部が画面の下部と一致し、要素の上部が表示されなくなっていることがわかります。 4 番目の段階では、画面が一番下までスクロールします。Web ページの一番下に著作権情報があると考えられますが、この情報をカバーするために要素がスクロールすることはできません。そのため、赤い線は表示されません。スクロールに沿って進みます。

これは、画面が下にスクロールするときの模式図です。画面が上にスクロールする場合は、この順序が逆になります。ただし、画面を上にスクロールすると、最初に下にスクロールしたときと同じ効果が得られます。つまり、このときの重要なポイントは、上にスクロールするときの緑色の領域の上部です。画面が要素の上部に揃えられます。技術的な問題により、Wutu Gang はこの効果を達成できませんでした。

3. 数値と数量の計算

スクロールするときは、変化する量と変化しない量を把握し、定数の変化を見つけ、変化の中の定数を見つける必要があります。つまり、さまざまな高さの関係を計算する方法を明確に区別する必要があります。。

図 1 では、高さの計算を補助するために青い縦線を使用し、画面と要素の位置を示すために赤い線を使用し、青い縦線を a、b、c、d、e、 f 6 つの段落。それでは、それらの間の量的な関係の変化はどのようなものでしょうか? (緑の部分の要素を#myDiv、著作権情報を含む下部の要素を#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跟随屏幕滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。