+ JavaScript の質問用スレッド vol.25 +

このエントリーをはてなブックマークに追加
348Name_Not_Found
サイト・メニューを記したナヴィゲーション用オブジェクト(ID="navbar")を
上下にスクロールしても常に最下部に表示させたいので、
position:fixed;を実装しないIEのため下記の通りのスクリプトを仕組みました。
IE6互換モードでは動作しましたが、標準準拠モードではうまくゆかなくなります。
<SCRIPT TYPE="text/javascript"><!--
var DOM=document.getElementById;
var Opera=(navigator.userAgent.indexOf("Opera")!=-1 && DOM)?1:0;
var IE=(document.all && !Opera)?1:0;
var IE6s=((navigator.appVersion.indexOf("MSIE 6")>-1) && DOM && document.compatMode=="CSS1Compat")?1:0
function alwaysBottom() {
object=IE?navbar.style:document.getElementById('navbar').style;
var top="top";
objH=document.getElementById('navbar').offsetHeight;
newY=IE6s?D.documentElement.scrollTop:IE?D.body.scrollTop:window.pageYOffset;
objY=newY + document.body.clientHeight - objH;
if (newY>-1){Y=object[top]=objY};
}
if(NN4||IE||DOM) {setInterval("alwaysBottom()",50);}//5秒毎
//--></SCRIPT>
<STYLE type="text/css"><!--
#navbar {position:absolute; right:0;left:0; margin-bottom:0; z-index:50;}
--></STYLE>
どう修正すればよいか、ご指摘下さいませんか。

また、ページ最下部の上にオブジェクトが重なって隠れるのを回避するため
body要素の下マージンをオブジェクトの高さ分だけ指定しようと
bodM=document.getElementsByTagName('body')[0].style.marginBottom;
if (object.position!=='static') {bodM=('objH');};
と追記しましたが、無効でした。これも正しいやり方をご教示いただけると助かります。
349348:04/02/06 19:29 ID:???
newY=IE6s?D.documentElement.scrollTop:IE?D.body.scrollTop:window.pageYOffset;

newY=IE6s?document.documentElement.scrollTop:IE?document.body.scrollTop:window.pageYOffset;
350Name_Not_Found:04/02/06 20:11 ID:???
>>349
そんなことするより
var body = document.documentElement || document.body;
とかしてあとはこの変数を使っとけばいいんじゃない。ブラウザが
何であるかによらず。
351348:04/02/06 20:13 ID:???
body要素の下マージンをオブジェクトの高さ分だけ指定するのは、
if (IE) {D.getElementsByTagName('body')[0].style.marginBottom=objH;};
で出来ました。自己解決すみません(でもなんで失敗したかはよくわかってない……)。

ただ、IE6 Strictモードで意図通り動作しないのは、まだ直りません。
また、できればクロス・ブラウザにしてOpera7やMacIEでも動作可能にしたいのですが
私の手にはあまります。どうか改良案を御示教下さい。
352348:04/02/06 20:30 ID:???
>>350
ご指摘に従って、>>348
var Body = document.documentElement || document.body;
newY=IE?Body.scrollTop:window.pageYOffset;
と修正すると、IE6 Quirksモードで動かなくなります。
さらに
objY=newY + Body.clientHeight - objH;
とすると、オブジェクトが消えて見えなくなりました。
何かいけないやり方をしてますか?
Strictモードならご指摘の修正が有効ですが……。
353Name_Not_Found:04/02/06 21:20 ID:???
>>348をMozillaで動作可能にするには
var unit=(!N6)?'':'px';//追加(NN6strictモード単位必須)
if (newY>-1){Y=object[top]=objY+unit};
とすればよい。
しかしQuirksモードにしてNetscape7.1で確認したら、動作は問題ないけれど、
なぜかそのページにHR要素があるとそれがチカチカ小刻みに点滅する。