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

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、これで完了です。簡単です。
最後に
例

を示します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。