fixedLAYER()
スクロールしてもレイヤ−の位置が動かないように固定するサンプルファンクションです。
各ブラウザごとにスクロール後のページ上の位置を検出してレイヤー位置を微調整しています。
Mace4.5以外のeではスクロール時に調整し、それ以外のブラウザではsetTimeoutで0.1秒ごとにスキャンして調整しています。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : fixedLAYER('レイヤ−名',位置,offSetX,offSetY)
レイヤ−名: 固定するレイヤー名
位置 : (固定するレイヤーの位置をあらわす文字)
rightTop 右上 rightBottom 右下
leftBottom 左下 leftTop 左上
center 中央 * デフォルトはleftTop
offSetX : 最寄りの辺(または中心)からのピクセル数 水平方向
offSetY : 最寄りの辺(または中心)からのピクセル数 垂直方向
function startFix(){
/* startFix()関数はfixedLAYER()関数と必ずセットで
使ってください。
このstartFix()関数内へ固定したいレイヤー名などを
引数へ書いたfixedLAYER()関数をならべてください。
*/
fixedLAYER(layName,posString,offSetX,offSetY)
}
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
function fixedLAYER(layName,posString,offSetX,offSetY){
//初期化
if(!window.fixedLAYER[layName]){
//--ブラウザ判定
this.ie = !!document.all
this.n4 = !!document.layers
this.w3c = !!document.getElementById
this.ua = navigator.userAgent
this.mac45 = ua.indexOf('MSIE 4.5; Mac_PowerPC') != -1
this.mac5 = ua.indexOf('MSIE5.0;Mac_PowerPC') != -1
this.macie = ua.indexOf('Mac_PowerPC') !=-1 && ie
this.moz = ua.indexOf('Gecko') !=-1
this.opr = !!window.opera
//mace4.5以外のieはonscroll,onresizeするたびに動作
if(this.ie&&!(this.mac45)){
// fixedLAYER起動関数
window.onscroll = window.onresize = startFix
}
//--n4リサイズバグ回避用リロード処理
if(this.n4)
window.onresize = function(){ location.reload() }
window.fixedLAYER[layName] = true
}
offSetX = parseInt(offSetX,10)
offSetY = parseInt(offSetY,10)
//--引数ごとの処理分岐
if( posString == 'rightTop' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
} else if( posString == 'rightBottom' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'leftBottom' ){
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'center' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth/2 + offSetX
else offLeft = window.innerWidth/2 + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight/2+ offSetY
else offTop = window.innerHeight/2 + offSetY
} else {
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
}
//--整数化する
offLeft = parseInt(offLeft,10)
offTop = parseInt(offTop,10)
//--ページ上のレイヤー位置xyを決める
if(document.all&&!this.opr){
var mx = document.body.scrollLeft + offLeft
var my = document.body.scrollTop + offTop
} else {
var mx = self.pageXOffset + offLeft
var my = self.pageYOffset + offTop
}
//--レイヤーを動かす(maveLAYER()と同じ処理)
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.left = mx
document.getElementById(layName).style.top = my
} else if(document.all){ //e4用
document.all(layName).style.pixelLeft = mx
document.all(layName).style.pixelTop = my
} else if(document.layers) //n4用
document.layers[layName].moveTo(mx,my)
//Mace4.5とWinOperaはsetTimeoutでfixedLAYER()を起動する
if(!(this.ie&&!this.mac45) || this.opr){
clearTimeout(fixedLAYER[layName])
fixedLAYER[layName]=setTimeout("fixedLAYER('"+layName+"','"+posString
+"','" +offSetX+"','"+offSetY+"')",100)
}
}
Example
<script type='text/javascript'>
<!--
function startFix(){
/* startFix()関数はfixedLAYER()関数と必ずセットで
使ってください。
このstartFix()関数内へ固定したいレイヤー名などを
引数へ書いたfixedLAYER()関数をならべてください。
*/
fixedLAYER( 'fixedLay0' ,'leftTop',120,120)
}
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
function fixedLAYER(layName,posString,offSetX,offSetY){
//初期化
if(!window.fixedLAYER[layName]){
//--ブラウザ判定
this.ie = !!document.all
this.n4 = !!document.layers
this.w3c = !!document.getElementById
this.ua = navigator.userAgent
this.mac45 = ua.indexOf('MSIE 4.5; Mac_PowerPC') != -1
this.mac5 = ua.indexOf('MSIE5.0;Mac_PowerPC') != -1
this.macie = ua.indexOf('Mac_PowerPC') !=-1 && ie
this.moz = ua.indexOf('Gecko') !=-1
this.opr = !!window.opera
//mace4.5以外のieはonscroll,onresizeするたびに動作
if(this.ie&&!(this.mac45)){
// fixedLAYER起動関数
window.onscroll = window.onresize = startFix
}
//--n4リサイズバグ回避用リロード処理
if(this.n4)
window.onresize = function(){ location.reload() }
window.fixedLAYER[layName] = true
}
offSetX = parseInt(offSetX,10)
offSetY = parseInt(offSetY,10)
//--引数ごとの処理分岐
if( posString == 'rightTop' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
} else if( posString == 'rightBottom' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'leftBottom' ){
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'center' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth/2 + offSetX
else offLeft = window.innerWidth/2 + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight/2+ offSetY
else offTop = window.innerHeight/2 + offSetY
} else {
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
}
//--整数化する
offLeft = parseInt(offLeft,10)
offTop = parseInt(offTop,10)
//--ページ上のレイヤー位置xyを決める
if(document.all&&!this.opr){
var mx = document.body.scrollLeft + offLeft
var my = document.body.scrollTop + offTop
} else {
var mx = self.pageXOffset + offLeft
var my = self.pageYOffset + offTop
}
//--レイヤーを動かす(maveLAYER()と同じ処理)
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.left = mx
document.getElementById(layName).style.top = my
} else if(document.all){ //e4用
document.all(layName).style.pixelLeft = mx
document.all(layName).style.pixelTop = my
} else if(document.layers) //n4用
document.layers[layName].moveTo(mx,my)
//Mace4.5とWinOperaはsetTimeoutでfixedLAYER()を起動する
if(!(this.ie&&!this.mac45) || this.opr){
clearTimeout(fixedLAYER[layName])
fixedLAYER[layName]=setTimeout("fixedLAYER('"+layName+"','"+posString
+"','" +offSetX+"','"+offSetY+"')",100)
}
}
//-->
</script>
<style type="text/css">
<!--
div.fixedLay {
position : absolute ;
z-index : 100 ;
left : -200px ;
top : -200px ;
}
-->
</style>
<body onload="startFix()">
<div id="fixedLay0"
class="fixedLay">
<a href="http://allabout.co.jp/computer/javascript/"
target="lnk"
class="fixedLay">このリンクはスクロールしても<br>位置固定されます
</a>
</div>
<br><br><br><br><br><br><br><br>...略
//--オブジェクト名で処理する場合
上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。
Syntax : fixedLAYERoj(オブジェクト,位置,offSetX,offSetY)
レイヤ−名: 固定するレイヤーオブジェクト
位置 : (固定するレイヤーの位置をあらわす文字)
rightTop 右上 rightBottom 右下
leftBottom 左下 leftTop 左上
center 中央 * デフォルトはleftTop
offSetX : 最寄りの辺(または中心)からのピクセル数 水平方向
offSetY : 最寄りの辺(または中心)からのピクセル数 垂直方向
//--fixedLAYERoj()動作開始(ここではページ読み込み時に起動)
window.onload = worksonload
function worksonload(){
//--対象レイヤーの取得
targetLay0 = getLayStyleOj('fixedLay0')
//--位置固定スタート
startFix()
}
//--layNameで指定したオブジェクトを返す(必ずonload後に実行すること)
function getLayStyleOj(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style
else if(document.all) //e4用
return document.all(layName).style
else if(document.layers) //n4用
return document.layers[layName]
}
function startFix(){
/* startFix()関数はfixedLAYERoj()関数と必ずセットで
使ってください。
このstartFix()関数内へ固定したいレイヤー名などを
引数へ書いたfixedLAYERoj()関数をならべてください。
*/
fixedLAYERoj( targetLay0 ,'leftTop',120,120)
}
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
function fixedLAYERoj(oj,posString,offSetX,offSetY){
//初期化
if(!window.fixedLAYERoj[oj]){
//--ブラウザ判定
this.ie = !!document.all
this.n4 = !!document.layers
this.w3c = !!document.getElementById
this.ua = navigator.userAgent
this.mac45 = ua.indexOf('MSIE 4.5; Mac_PowerPC') != -1
this.mac5 = ua.indexOf('MSIE5.0;Mac_PowerPC') != -1
this.macie = ua.indexOf('Mac_PowerPC') !=-1 && ie
this.moz = ua.indexOf('Gecko') !=-1
this.opr = !!window.opera
//mace4.5以外のieはonscroll,onresizeするたびに動作
if(this.ie&&!(this.mac45)){
// fixedLAYER起動関数
window.onscroll = window.onresize = startFix
}
//--n4リサイズバグ回避用リロード処理
if(this.n4)
window.onresize = function(){ location.reload() }
window.fixedLAYERoj[oj] = true
}
offSetX = parseInt(offSetX,10)
offSetY = parseInt(offSetY,10)
//--引数ごとの処理分岐
if( posString == 'rightTop' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
} else if( posString == 'rightBottom' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'leftBottom' ){
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'center' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth/2 + offSetX
else offLeft = window.innerWidth/2 + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight/2+ offSetY
else offTop = window.innerHeight/2 + offSetY
} else {
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
}
//--整数化する
offLeft = parseInt(offLeft,10)
offTop = parseInt(offTop,10)
//--ページ上のレイヤー位置xyを決める
if(document.all&&!opr){
var mx = document.body.scrollLeft + offLeft
var my = document.body.scrollTop + offTop
} else {
var mx = self.pageXOffset + offLeft
var my = self.pageYOffset + offTop
}
//--レイヤーを動かす(maveLAYERoj()と同じ処理)
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
oj.left = mx
oj.top = my
} else if(document.all){ //e4用
oj.pixelLeft = mx
oj.pixelTop = my
} else if(document.layers) //n4用
oj.moveTo(mx,my)
//Mace4.5とWinOperaはsetTimeoutでfixedLAYERoj()を起動する
if(!(this.ie&&!this.mac45) || this.opr){
clearTimeout(fixedLAYERoj[oj])
fixedLAYERoj[oj]=setTimeout("fixedLAYERoj("+oj+",'"+posString
+"','" +offSetX+"','"+offSetY+"')",100)
}
}
Example
<script type='text/javascript'>
<!--
//--fixedLAYERoj()動作開始(ここではページ読み込み時に起動)
window.onload = worksonload
function worksonload(){
//--対象レイヤーの取得
targetLay0 = getLayStyleOj('fixedLay0')
targetLay1 = getLayStyleOj('fixedLay1')
targetLay2 = getLayStyleOj('fixedLay2')
//--位置固定スタート
startFix()
}
function startFix(){
/* startFix()関数はfixedLAYERoj()関数と必ずセットで
使ってください。
このstartFix()関数内へ固定したいレイヤー名などを
引数へ書いたfixedLAYERoj()関数をならべてください。
*/
fixedLAYERoj( targetLay0 ,'leftTop',120,120)
fixedLAYERoj( targetLay1 ,'leftTop',120,150)
fixedLAYERoj( targetLay2 ,'leftTop',120,180)
}
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
function fixedLAYERoj(oj,posString,offSetX,offSetY){
//初期化
if(!window.fixedLAYERoj[oj]){
//--ブラウザ判定
this.ie = !!document.all
this.n4 = !!document.layers
this.w3c = !!document.getElementById
this.ua = navigator.userAgent
this.mac45 = ua.indexOf('MSIE 4.5; Mac_PowerPC') != -1
this.mac5 = ua.indexOf('MSIE5.0;Mac_PowerPC') != -1
this.macie = ua.indexOf('Mac_PowerPC') !=-1 && ie
this.moz = ua.indexOf('Gecko') !=-1
this.opr = !!window.opera
//mace4.5以外のieはonscroll,onresizeするたびに動作
if(this.ie&&!(this.mac45)){
// fixedLAYER起動関数
window.onscroll = window.onresize = startFix
}
//--n4リサイズバグ回避用リロード処理
if(this.n4)
window.onresize = function(){ location.reload() }
window.fixedLAYERoj[oj] = true
}
offSetX = parseInt(offSetX,10)
offSetY = parseInt(offSetY,10)
//--引数ごとの処理分岐
if( posString == 'rightTop' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
} else if( posString == 'rightBottom' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth + offSetX
else offLeft = window.innerWidth + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'leftBottom' ){
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight + offSetY
else offTop = window.innerHeight + offSetY
} else if( posString == 'center' ){
if(this.ie&&!this.opr)
offLeft = document.body.clientWidth/2 + offSetX
else offLeft = window.innerWidth/2 + offSetX
if(this.ie&&!this.opr)
offTop = document.body.clientHeight/2+ offSetY
else offTop = window.innerHeight/2 + offSetY
} else {
if(this.ie&&!this.opr)
offLeft = offSetX
else offLeft = offSetX
if(this.ie&&!this.opr)
offTop = offSetY
else offTop = offSetY
}
//--整数化する
offLeft = parseInt(offLeft,10)
offTop = parseInt(offTop,10)
//--ページ上のレイヤー位置xyを決める
if(document.all&&!opr){
var mx = document.body.scrollLeft + offLeft
var my = document.body.scrollTop + offTop
} else {
var mx = self.pageXOffset + offLeft
var my = self.pageYOffset + offTop
}
//--レイヤーを動かす(maveLAYERoj()と同じ処理)
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
oj.left = mx
oj.top = my
} else if(document.all){ //e4用
oj.pixelLeft = mx
oj.pixelTop = my
} else if(document.layers) //n4用
oj.moveTo(mx,my)
//Mace4.5とWinOperaはsetTimeoutでfixedLAYERoj()を起動する
if(!(this.ie&&!this.mac45) || this.opr){
clearTimeout(fixedLAYERoj[oj])
fixedLAYERoj[oj]=setTimeout("fixedLAYERoj("+oj+",'"+posString
+"','" +offSetX+"','"+offSetY+"')",100)
}
}
//--layNameで指定したオブジェクトを返す(必ずonload後に実行すること)
function getLayStyleOj(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style
else if(document.all) //e4用
return document.all(layName).style
else if(document.layers) //n4用
return document.layers[layName]
}
//-->
</script>
<style type="text/css">
<!--
div.fixedLay {
position : absolute ;
z-index : 100 ;
left : -200px ;
top : -200px ;
}
-->
</style>
<div id="fixedLay0"
class="fixedLay">
<a href="http://allabout.co.jp/computer/javascript/"
target="lnk"
class="fixedLay">このリンクはスクロールしても動きません1
</a>
</div>
<div id="fixedLay1"
class="fixedLay">
<a href="http://allabout.co.jp/computer/javascript/"
target="lnk"
class="fixedLay">このリンクはスクロールしても動きません2
</a>
</div>
<div id="fixedLay2"
class="fixedLay">
<a href="http://allabout.co.jp/computer/javascript/"
target="lnk"
class="fixedLay">このリンクはスクロールしても動きません2
</a>
</div>
<br><br><br><br><br><br><br><br>...略