webページで、ページの一部を固定する方法

質問

webページで、ページの一部をスクロールせずに固定する方法を知りたく。

以下は上記はEPSON DIRECTのオンラインショッピングのページですが、
http://shop.epson.jp/bto/begin.do?m=EndeavorPro4300&i=M04_SKR01&q=1&abort=/goods/pcDetailCom/begin.do?m=EndeavorPro4300
価格表示の部分がスクロールにより画面外に出ないようになっています。

JavaScriptで、onScrollイベントハンドラで位置を再設定して固定したようにするサンプルは見つけましたが動きがカクカクしてしまいます。上記は画面の上部にぴったり張り付いたようになっており、どうやっているのか不思議です。

参考になるサイトなどありましたらご教授願います。

回答No.2

auty · ベストアンサー

【EPSON DIRECTのオンラインショッピングのページ】は、複雑な動きをしますが、
想像するに、現在のスクロール位置を判断して固定したり動くままにしたりしているのではないでしょうか。ならばその手前の段階で参考になりそうなページを見つけてみました。

・　IE6でもスクロールしても動かないボックス
http://www.stylish-style.com/csstec/ultimate/fixbox-ie6.html

・　「擬似フレーム（疑似フレーム）」の作り方（IE6 にも対応、スタイルシート(CSS)、JavaScript使用）
http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html

お礼

CSSでできるのですね。大変参考になりました。

回答No.1

auty

詳しくは調べていませんが、ソースコードを見ると固定されている部分は、id="box"となっています。
<div id="box" class="btoPriceContainer">

また、jsファイルには
-------------------------------------------------------------------------------
http://shop.epson.jp/eshop/script/bto/bto.js
-------------------------------------------------------------------------------
次の２箇所が見受けられます。

function JsFloat(){
var e=getE("box")
var te=getE("boxTop")
var be=getE("boxBottom")
...
ctrl.onscroll=function(){
var t=ctrl.scrollTop
var l=ctrl.scrollLeft
var el=left-l
var et
var top=te.offsetTop+te.parentNode.offsetTop
if(top>t+topMargin){
et=(top-t)
}else if(t<be.offsetTop-e.offsetHeight){
et=topMargin
}else{
et=(be.offsetTop-t-e.offsetHeight)
}
e.style.top=et+"px"
e.style.left=el+"px"
overlap()
rect(t,l,et,el)
return true
}
ctrl.onscroll()
window.onresize=ctrl.onscroll
window.onscroll=ctrl.onscroll

と

function cat(c){
if(c>-1){
var f=document.jf
var stbd=f.stbd.value.split(",")
var st=stbd[c]
if(st==getN("st").value){
document.location.href="#"+c
if(st=="1"||st=="2"){
if(_ie==6){
getE("centerCtrl").scrollTop-=getE("box").offsetHeight
}else{
scrollBy(0,-1*getE("box").offsetHeight)
}

}
}else{
getN("st").value=st
getN("cnst").value=c
getN("pf").action=getN("mf").action
getN("pf").submit()
}
}
}
が見られます。

やはり onscrollが使われているようです。

補足

あら、ソースが見れるのですね。

> やはり onscrollが使われているようです。
ということですね。なんか複雑そうですがじっくり見てみます。

ありがとう御座いました。