+ JavaScript の質問用スレッド vol.25 +
348 :
Name_Not_Found :
04/02/06 19:25 ID:E+T2Hyxs サイト・メニューを記したナヴィゲーション用オブジェクト(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');}; と追記しましたが、無効でした。これも正しいやり方をご教示いただけると助かります。
349 :
348 :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;
>>349 そんなことするより
var body = document.documentElement || document.body;
とかしてあとはこの変数を使っとけばいいんじゃない。ブラウザが
何であるかによらず。
351 :
348 :04/02/06 20:13 ID:???
body要素の下マージンをオブジェクトの高さ分だけ指定するのは、 if (IE) {D.getElementsByTagName('body')[0].style.marginBottom=objH;}; で出来ました。自己解決すみません(でもなんで失敗したかはよくわかってない……)。 ただ、IE6 Strictモードで意図通り動作しないのは、まだ直りません。 また、できればクロス・ブラウザにしてOpera7やMacIEでも動作可能にしたいのですが 私の手にはあまります。どうか改良案を御示教下さい。
352 :
348 :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モードならご指摘の修正が有効ですが……。
>>348 をMozillaで動作可能にするには
var unit=(!N6)?'':'px';//追加(NN6strictモード単位必須)
if (newY>-1){Y=object[top]=objY+unit};
とすればよい。
しかしQuirksモードにしてNetscape7.1で確認したら、動作は問題ないけれど、
なぜかそのページにHR要素があるとそれがチカチカ小刻みに点滅する。