サイドバーのscrolling_javascriptスキルの単純な実装コード
May 16, 2016 pm 05:40 PMWeb サイトを閲覧していると、一部の Web サイトで、ページの上部までスクロールした後、サイドカラムの一部のコンテンツがその位置に固定され、スクロール バーでスクロールしなくなっているのをよく見かけます。この効果は「サイドバー スクロール」と呼ばれます。ページからスクロールしたくないコンテンツに便利です。
サイドバーのスクロールを実装するには、2 つの一般的な方法があります。これらの 2 つの方法は、NEOEASE による実装で明らかに紹介されています。通常、jQuery ライブラリをロードする必要のない Web サイトにとっては負担がかかります (jQuery は現在ますます大きくなっています...)。もう 1 つの方法は、ネイティブ JavaScript を使用してエフェクトを記述することです。この方法は、前の方法よりもはるかに軽量です。しかし、ネイティブ JavaScript で書かれたファイルは 4K を超えており、シンプルさを優先する私にとってはまだ複雑すぎます。では、もっと簡単に実装する方法はあるのでしょうか?
答えはもちろんイエスです。以下に詳細を紹介します。
最初に HTML ファイルについて話しましょう (もちろん、動的ファイルにすることもでき、常に HTML コードが含まれます)
<div id="box">
<div id="float" class="div1"> 🎜>ここにスクロールする必要があるコンテンツを追加します
</div>
次に CSS コード
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
最後に JS コード (配置可能)スクロールする必要があるページ内、または別の JS ファイル内) 呼び出し)
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、これで完了です。簡単です。
最後に
例

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか?

JavaScript を使用して、ページの一番下までスクロールしたときに自動的に読み込まれる無限スクロール効果を実現するにはどうすればよいですか?

画像のスクロール切り替え効果をJavaScriptで実装するにはどうすればよいですか?

JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか?
