スクロールしても位置の変らないブロック

質問

下記のようなページがあります。

上部にページ内検索窓があります。
下に長いページです。

この時、下にスクロールしていっても上部の検索窓が常に上部に見えているようにしたいのですが・・。

回答No.2

noname#199778 · ベストアンサー

DHTMLを使えば、一応可能だと思います。
試しに作ってみました。

head内に以下のソースを入れてみてください。

<script type="text/javascript"><!--
function init(){
if (document.getElementById){
MVON=setInterval("againstScroll()",10);
}
}

function againstScroll(){
obj=document.getElementById("dialog").style;
if (navigator.appName.match("Internet Explorer")){
if (document.compatMode=="BackCompat"){
obj.top=document.body.scrollTop+"px";
}
else {
obj.top=document.documentElement.scrollTop+"px";
}
}
else{
obj.top=pageYOffset+"px";
}
}

window.onload=init;
// --></script>

検索窓部分のソースについては、以下のdiv要素で括るか、その要素自体に同様のid設定とスタイルシート指定をしてください。

<div id="dialog" style="position: relative; top: 0; z-index: 1; background-color: white;"></div>

idはスクリプト側でこの要素を特定して表示位置を操作するために必須です。
スタイルシートについては、positionプロパティはabsoluteでも構わないかも知れませんが、その場合ページトップでこの要素が内容を覆い隠してしまう可能性がありますので、relativeの方が楽でしょう。 z-indexについては、スクロールしたときでもこの要素が機能するために、他の要素よりも前面に表示させる必要性があるでしょうから、適宜他の要素よりも前面になるような値を指定してください。 背景については、設定しておかないとその下の本文が重ねて表示されるので見難いでしょう。 ついでに、これにpadding設定などをして、表示枠を少し余計目に稼いでおくと、より見やすくなると思います。

多分これで希望通りの動作になると思います。
Windows Me上のIE6、Netscape7.1、Opera7.11では、狙い通りに動作していることを確認しました。

参考になれば。

お礼

回答ありがとうございました。

やりたいことそのままでした。
ページ検索もしてみましたが、問題なく動きました。
活用させていただきます。

回答No.1

noname#10926

フレームを使えばよいと思うが。

JavaScriptを使って実現させなければならないのでしょうか？