固定サイドバーを実現するためのJavaScript

固定サイドバーを実装するにはJavaScriptを使用します。参考までに、具体的な内容は次のとおりです。

まだフロントエンドの勉強中です。コードに不備や間違った考えがあったらご容赦ください。アドバイスをよろしくお願いします。

特定のショッピングモールや特定のウェブサイトを閲覧しているとき、サイドバーと呼ばれるものによく遭遇します。これはブラウザの閲覧の長さに応じて変化し、ウィンドウに対して固定された位置を実現します。

**コードは以下のとおり**

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
 <スタイル>
 。cm{
 位置: 絶対;
 上: 300px;
 左マージン: 1150px;
 幅: 60ピクセル;
 高さ: 130px;
 背景色: ピンク;
 }
 .w{
 マージン: 10px 自動;
 幅: 80%;
 }
 。頭{
 高さ: 200px;
 背景色: 青;
 }
 。バナー{
 高さ: 400px;
 背景色: 緑;
 }
 。主要{
 高さ: 1000ピクセル;
 背景色: ホットピンク;
 }
 スパン {
 表示: なし;
 /*位置: 絶対;
 下部: 0;*/
 }
 </スタイル>
</head>
<本文>
 <div class="cm">
 <span class="backTop">トップに戻る</span>
 </div>
 <div class="head w">ヘッドエリア</div>
 <div class="banner w">バナーエリア</div>
 <div class="main w">メインエリア</div>
 <スクリプト>
 var cm = document.querySelector('.cm')
 var バナー = document.querySelector('.banner')
 /*console.log(バナー.offsetTop)*/
 // カールした頭のサイズと位置は外側に書き込まれます var Bannertop=banner.offsetTop
 var cmtop=cm.offsetTop-bannertop
 var main = document.querySelector('.main')
 var goback = document.querySelector('.backTop')
 var maintop=main.offsetTop
 document.addEventListener('スクロール',function() {
 //ページがロールアウトされます /*console.log(window.pageYOffset)*/
 //curl ヘッダーが 214 より大きい場合、サイドバーは固定されます if (window.pageYOffset>bannertop){
 cm.style.position='固定'
 cm.style.top=cmtop+'px'
 }それ以外 {
 cm.style.position='絶対'
 スタイルトップ='300px'
 }
 (window.pageYOffset>maintop)の場合{
 goback.style.display='ブロック'
 }それ以外 {
 goback.style.display='なし'
 }
 })
 </スクリプト>
</本文>
</html>

デモンストレーション効果

コードの説明

ここではドキュメントに追加されたイベント scroll が使用され、ブラウザの scroll イベントはスクロール時に関数をトリガーするために使用されます。

ここで、bannerTop という変数が設定されています。これは、中央の緑色のモジュールの上部とページの上部の間の距離です。次に、変数 cmtop が定義されます。ここで、cm はサイドバーから上部までの距離で、cmtop=bannerTop-cm.offsetTop です。次に、ページの巻き上がり長さが中間モジュールから上部までの距離より大きいかどうかを判断します。これは、ページが中間モジュールまでスワイプされたかどうかを意味します。中間モジュールまでスワイプされた場合は、サイドバーの位置を固定し、それに応じてサイドバーから上部までの距離を変更します。この場合、サイドバーと中間ブロックは比較的静的であるため、中間領域に巻き込まれていない場合は cmtop の値が一定であり、中間領域に巻き込まれた場合はバナーになります。 Top の値が負の値になったため、それに応じて cmtop の値が増加し、この増加した値がサイドバーの上部からの距離の値に渡されます。これにより、サイドバーが中央領域までスクロールされたときに、サイドバーが比較的静止したままになる状況が発生します。中央の領域をスライドしないと、サイドバーはデフォルトの位置のままになります。

その後、最後の領域までスワイプすると、サイドバーに「先頭に戻る」という文字が表示されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: