ホームページ ウェブフロントエンド jsチュートリアル サイドバーのscrolling_javascriptスキルの単純な実装コード

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

May 16, 2016 pm 05:40 PM
スクロール

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

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

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

<div id="box">
<div id="float" class="div1"> 🎜>ここにスクロールする必要があるコンテンツを追加します
</div>


次に 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 までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? Oct 22, 2023 am 08:12 AM

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

iframe のスクロール動作を監視する iframe のスクロール動作を監視する Feb 18, 2024 pm 08:40 PM

iframe のスクロール動作を監視する

HTML、CSS、jQuery: 自動スクロール掲示板を作成する HTML、CSS、jQuery: 自動スクロール掲示板を作成する Oct 27, 2023 pm 06:31 PM

HTML、CSS、jQuery: 自動スクロール掲示板を作成する

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

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

画像のスクロール切り替え効果をJavaScriptで実装するにはどうすればよいですか? 画像のスクロール切り替え効果をJavaScriptで実装するにはどうすればよいですか? Oct 20, 2023 pm 05:51 PM

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

Vueで全画面スクロール効果を実装する方法 Vueで全画面スクロール効果を実装する方法 Nov 08, 2023 am 08:42 AM

Vueで全画面スクロール効果を実装する方法

CSSで下のボタンへのスムーズなスクロールを実現する方法 CSSで下のボタンへのスムーズなスクロールを実現する方法 Nov 21, 2023 pm 05:11 PM

CSSで下のボタンへのスムーズなスクロールを実現する方法

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

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

See all articles