ウェブページの右側に固定されたフローティングレイヤーの実装コード

ウェブページの右側に固定されたフローティングレイヤーの実装コード

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>無題のドキュメント</title>
<スタイル タイプ="text/css">

{
マージン:0px;
パディング:0px;
上マージン:60px;
下マージン:60px;
}
#div_nav_zone_right
{
位置:絶対;
フロート:右;
zインデックス:3;
幅:120ピクセル;
高さ:100px;
右:0px;
上: 332px;
背景色:#999;
}
#div_nav_zone_right_bottom
{
位置:絶対;
フロート:右;
zインデックス:3;
幅:120ピクセル;
高さ:100px;
右:0px;
上: 532px;
背景色:#CCC;
}
#div_ul
{
位置:固定;
高さ:50px;
}
ウル、リ
{
マージン:0px;
}

{
リストスタイル:なし;
}
</スタイル>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(関数()
{
moveDiv(); //ページ初期化実行
$(window).scroll(関数(){
移動Div();
右下Div() に移動します。
});
});
// 右側中央
関数moveDiv()
{
var scrollTop = $(document).scrollTop(); //非表示のスクロールバーの上部の高さ
var clientHeight = $(window).height(); //Webページのコンテンツ領域の高さ
//位置を設定する
var hei = $("#div_nav_zone_right").css("height");
hei = hei.replace("px","");
var newPosY = scrollTop + (clientHeight-hei)/2;
$("#div_nav_zone_right").css("top",newPosY+"px");
}
// 右端から 100 ピクセル下
関数moveRightBottomDiv()
{
var scrollTop = $(document).scrollTop(); //非表示のスクロールバーの上部の高さ
var clientHeight = $(window).height(); //Webページのコンテンツ領域の高さ
//位置を設定する
var hei = $("#div_nav_zone_right_bottom").css("height");
hei = hei.replace("px","");
var newPosY = clientHeight + scrollTop - hei - 100;
$("#div_nav_zone_right_bottom").css("top",newPosY+"px");
}
</スクリプト>
</head>
<本文>
1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>
<p>sd</p>
<p>f</p>
<p> </p>
<p>広告</p>
<p>f</p>
<p>広告</p>
<p>
<input type="button" name="button" id="button" value="送信" onclick="clk()" />
</p>
<p>広告</p>
<p>sf AS

として
d


</p>
<p> </p>
<p>広告</p>
<p>f</p>
<p>広告</p>
悲しい


1つの
d


1つの

<div id="div_nav_zone_right">
<ul>
<li>サイドバーメニュー 1</li>
<li>サイドバーメニュー 2</li>
<li>サイドバーメニュー 3</li>
<li>サイドバーメニュー 4</li>
</ul>
</div>

<div id="div_nav_zone_right_bottom">
<ul>
<li>サイドバーメニュー 1</li>
<li>サイドバーメニュー 2</li>
<li>サイドバーメニュー 3</li>
<li>サイドバーメニュー 4</li>
</ul>
</div>
</本文>
</html>

<<:  テーブルテーブルはnth-child()を使用して、交互の色の変更と配置を実現します。

>>:  HTML テーブルインライン形式の詳細な説明

推薦する

Vue はネストされたルーティングメソッドの例を実装します

1. ネストされたルーティングはサブルーティングとも呼ばれます。実際のアプリケーションでは、通常、ネ...

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

vue3 を使用してカウント関数コンポーネントのカプセル化例を実装する

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. アイデア2. 準備2. ...

Windows 10 での mysql-8.0.17-winx64 のインストール方法

1.公式サイトからダウンロードして解凍する参考: ダウンロード後、zip 圧縮ファイル (mysql...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

HTML知識ポイントの実践経験のまとめ

1. 表タグはtable、trは行、tdはセル、cellspacingはセル間の距離、cellpad...

1つの記事でJavaScript DOM操作の基本を学ぶ

DOM の概念DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、...

複雑なウェブサイトのナビゲーションを簡素化

<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...

MYSQL メタデータ ロック (MDL ロック) の理論とロック タイプ テスト

目次MYSQL メタデータ ロック (MDL ロック) 学習理論とロック タイプ テスト1. 予備的...

HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy

IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...

CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

Vue の vue.$set() メソッドのソースコード例の詳細な説明

Vue を使用してプロジェクトを開発する過程で、次のような問題によく遭遇します。Vue のデータでオ...

Vue2.x - アンチシェイクとスロットリングの使用例

目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...

JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか

序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...