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

コードをコピー

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

<!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 テーブルインライン形式の詳細な説明