サイドバーのscrolling_javascriptスキルの単純な実装コード-jsチュートリアル-php.cn

サイドバーのscrolling_javascriptスキルの単純な実装コード

WBOY

リリース： 2016-05-16 17:40:19

オリジナル

1137 人が閲覧しました

Web サイトを閲覧していると、一部の Web サイトで、ページの上部までスクロールした後、サイドカラムの一部のコンテンツがその位置に固定され、スクロールバーでスクロールしなくなっているのをよく見かけます。この効果は「サイドバースクロール」と呼ばれます。ページからスクロールしたくないコンテンツに便利です。
サイドバーのスクロールを実装するには、2 つの一般的な方法があります。これらの 2 つの方法は、NEOEASE による実装で明らかに紹介されています。通常、jQuery ライブラリをロードする必要のない Web サイトにとっては負担がかかります (jQuery は現在ますます大きくなっています...)。もう 1 つの方法は、ネイティブ JavaScript を使用してエフェクトを記述することです。この方法は、前の方法よりもはるかに軽量です。しかし、ネイティブ JavaScript で書かれたファイルは 4K を超えており、シンプルさを優先する私にとってはまだ複雑すぎます。では、もっと簡単に実装する方法はあるのでしょうか?

答えはもちろんイエスです。以下に詳細を紹介します。
最初に HTML ファイルについて話しましょう (もちろん、動的ファイルにすることもでき、常に HTML コードが含まれます)

コードをコピーしますコードは次のとおりです。

🎜>ここにスクロールする必要があるコンテンツを追加します

次に CSS コード

コードをコピーしますコードは次のとおりです:

#box{float:left;position:relative;width:250px;}

。 div1{width:250px;} 
.div2{position:fixed;_position:absolute;top:0;z-index:250;} 

 
最後に JS コード (配置可能)スクロールする必要があるページ内、または別の JS ファイル内) 呼び出し) 

コードをコピーコードは次のとおりです。

(function(){

var oDiv =document.getElementById("float"); 
var H=0,iE6; 
var Y=oDiv; 
 while(Y){H =Y.offsetTop;Y=Y.offsetParent}; 
iE6=window.ActiveXObject&&!window.XMLHttpRequest; 
if(!iE6){ 
window.onscroll=function() 
{ 
var s=document.body.scrollTop||document.documentElement.scrollTop; 
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style .top=(s-H) "px";}} 
else{oDiv.className="div1";} 
} 

 
OK、これで完了です。簡単です。 
最後に
例

を示します。