掲示板/JavaScript質問板/過去ログ/一覧/ 縦スクロールに合わせて動くメニュー

0 名前：なこ： 2006/01/16 00:02: こんばんは、初めまして。
最近HPを作り始めましたが、検索をかけてもなかなかヒットせず、ヒットしてもタグ
がなかったり・・・
という、是非知りたいタグがあります。

先日、縦をスクロールすると一緒に動くメニューを見ました。
私のサイトは、縦が長く、そのタグを使えば便利になるかなぁということで、是非ともタグを知りたいのですが・・・
もしかして、Javaじゃないでしょうか？（違いましたら、板違いですみません・・・）
一度「相対位置」を指定するタグを見つけ、これではないかと思ったのですが、違うようでした。

どなたか、知りませんか？有力な情報がほしいです。是非、よろしくお願いします。

1 名前： 匿名希望 ： 2006/01/16 00:02: JavaとJavaScriptの区別が付かない（二つは全然別の言語だけど）のはしようがないとしても、タグって何のことだと思ってます？
用語があやふやだと、探しても見つからないのは仕方ないことで。

「JavaScript エレベータメニュー」とか「JavaScript フローティングメニュー」で検索すれば出てきますけど、そんなに使いやすいものではないです。正直JavaScriptをタグタグ言ってるうちは厳しいと思うなあ…

2 名前： Z ： 2006/01/16 00:02: Scriptを使うときは必ずNOSCRIPT要素でかわりの手段（普通のテキストリンクなど）を用意してくださいね。

資料）
http://bakera.jp/html/opinion/zannen1.html
http://bakera.jp/html/opinion/zannen2.html

　そもそもHTMLとは？という疑問にはこちらの資料がおすすめです。

資料）
http://www.kanzaki.com/docs/html/htminfo10.html

3 名前：なこ： 2006/01/16 00:02: 私はPCも最近触り始めたばかりで、ホームページは全てタグで出来ると思っていました。
Javaについてもなんにも知らず、ただ特殊効果っぽいものが全てJavaなどと適当に思っていましたが・・・
ひよっこだと思い知らされました。私は、まだなんにも理解していません。

具体的な名前、ページを教えてくださって、どうもありがとうございました。
確かに、扱うには厳しいと思います。
HPをつくる前に、勉強しなおそうと思います。

匿名希望さん、 Zさん、返信ありがとうございました。

4 名前： S ： 2006/01/16 00:02: 　まあ、たとえばインターネットエクスプロラのセキュリティを「高」に変えただけでも”残念な思い”をさせられるサイトの方が世の中にはどっちかってーと多いわけで。
　あまり気に病むことはないけど、知っておいた方が得なことはインターネットの世界には特に多い。がんばってください。

http://members.jcom.home.ne.jp/pctips/www/knowledge/
http://members.jcom.home.ne.jp/pctips/www/concept/

5 名前： Pid ： 2006/01/16 00:02: スクリプトのために HTML を書くのではなく，HTML に合わせてスクリプトを設定できれば良いのかな。一応，以下は body 要素やスタイルを全く汚しません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>任意の要素をウィンドウのスクロールに合わせて動かしてみる</title>
<script type="text/javascript">

if ('undefined' == typeof this.pageYOffset) {
var d = (document.compatMode == 'CSS1Compat') ? 'documentElement' : 'body';
this.pageXOffset = function () { return document[d].scrollLeft; }
this.pageYOffset = function () { return document[d].scrollTop ; }
}

if ('undefined' == typeof this.addEventListener) {
this.addEventListener = new Function ('type', 'handler', 'capture', this.attachEvent ? "return this.attachEvent ('on' + type, handler);" : "this['on' + type] = function (oldHandler) { return function (e) { oldHandler && oldHandler (e); handler (e); } } (this['on' + type]);");
}

addEventListener ('load', function () {
////////////////////////////////////////////////////////////////////////

function Timer (msec, handler) {
this.handler = handler;
this.timeOut = msec || 100;
this.timerID = null;
}

function Scheduler (handler) {
this.timerID = function (thisObj, callBack) { return setTimeout (function() { thisObj.handler (); callBack.call (thisObj); }, thisObj.timeOut); } (this, arguments.callee);
}

function Wrapper (node) {
this.target = node;
}

function Coordinater (dx, dy) {
var curX = parseInt (this.left) + dx;
var curY = parseInt (this.top) + dy;
this.left = (curX > 0 ? curX : 0) + 'px';
this.top = (curY > 0 ? curY : 0) + 'px';
}

function Escalator (delay) { /*@cc_on@*/
this.scrollDelay = delay;
this.scrollX = pageXOffset /*@if (@_jscript) () @end@*/;
this.scrollY = pageYOffset /*@if (@_jscript) () @end@*/;
}

function Synchronizer (output) { /*@cc_on@*/
var dx = Accelerater.call (this, pageXOffset /*@if (@_jscript) () @end@*/ - this.scrollX);
var dy = Accelerater.call (this, pageYOffset /*@if (@_jscript) () @end@*/ - this.scrollY);
this.scrollX += dx;
this.scrollY += dy;
output.call (this, dx, dy);
}

6 名前： Pid ： 2006/01/16 00:02: function Accelerater (dv) {
return (dv) ? Math.round (dv / Math.abs (dv) * (Math.abs (dv) / this.scrollDelay)) : 0;
}

function Initializer () {
this.style.position = 'absolute';
if (isNaN (parseInt (this.style.left))) this.style.left = this.offsetLeft + 'px';
if (isNaN (parseInt (this.style.top ))) this.style.top = this.offsetTop + 'px';
}

////////////////////////////////////////////////////////////////////////

Escalator.prototype.init = function () {
return Initializer.apply (this.target, arguments);
}

Escalator.prototype.start = function () {
return Scheduler.apply (this, arguments);
}

Escalator.prototype.print = function () {
return Coordinater.apply (this.target.style, arguments);
}

Escalator.prototype.sync = function () {
return Synchronizer.call (this, function (dx, dy) { this.print (dx, dy); } );
}

Escalator.create = function (node, delay, msec) {
var e = new this (delay || 10);
Wrapper.call (e, node);
Timer.call (e, msec || 10, function () { e.sync (); } );
e.init ();
e.print (e.scrollX, e.scrollY);
e.start ();
return e;
}

Escalator.createById = function (id, delay, msec) {
var node = document.getElementById && document.getElementById(id);
return node ? this.create (node, delay, msec) : node;
}

////////////////////////////////////////////////////////////////////////
// ↓↓↓設定するのはここだけ。フロート化したい要素の id を指定する。

Escalator.createById ('page-top');
Escalator.createById ('abstract');

// ↑↑↑指定はいくつでも可能。とりうる引数についてはソース参照。
// id を持たない場合は Escalator.create (element); で直接要素を与えても良い。
////////////////////////////////////////////////////////////////////////
}, false);

</script>

7 名前： Pid ： 2006/01/16 00:02: <style type="text/css">

/* このスタイルはテスト用で，スクリプトとは何の関係もありません。 */

body {
width: 1200px;
height: 1000px;
}

#page-top {
border: 1px solid #888;
width: 100px;
height: 100px;
}

#abstract {
border: 1px solid #888;
width: 200px;
height: 200px;
position: absolute;
right: 0;
bottom: 0;
}

</style>
</head>
<body>
<h1 id="page-top">大見出し（この部分がウィンドウのスクロールに合わせて動く）</h1>

<p id="abstract">要約（この部分もウィンドウのスクロールに合わせて動）</p>

</body>
</html>