TAGS: Floating | メニュー | 絶対位置 | 固定 | 追随 | Javascript
WebページのHTML要素を絶対位置に固定しながらスクロールバーに追随させるFloatingメニューの実装JavaScriptを紹介します。

動作環境


◇ Firefox 1.0.x/1.5/2.0.x/3.0.x
◇ IE6.0/7.0
◇ Opera8.x/9.x
◇ Google Chrome 0.2.x.x
◇ Safari 3.1.2
◇ Konqueror 3.5.5

実装手順


1)絶対位置に配置したい要素を記述
<div id="floatdiv" style="
    position:absolute;
    width:200px;height:50px;left:0px;top:0px;
    padding:16px;background:#FFFFFF;
    border:2px solid #2266AA">
絶対位置に配置したい要素をこちらで記述します。
</div>


2)Absolute Floating Menuコードを記述(原文参照)
<script type="text/javascript"><!--
var floatingMenuId = 'floatdiv';    //DIV id
var floatingMenu =
{
    targetX: -250,        //X position(位置)
    targetY: 10,        //Y position(位置)

...

.

Sponsored Link


有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation