JavaScript はスクロール バーのスクロール レイヤーに従う (フローティング AD 効果)_JavaScript スキル

実際、この効果は多くの Web サイトで、主に Web ページの両側にフローティング広告として表示されます。難しそうに思えるかもしれませんが、原理は非常に簡単で、タイマーを使用して 0.1 秒ごとにレイヤーの位置を検出し、指定した位置 (ウィンドウに対して) に配置します。簡単なコードを書きました:

<title></title> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center"> </div>この広告スペースはレンタル中です
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
注:
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement .scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
else if (document.body) {
posX = document.body. cancelLeft;
posY = document.body.scrollTop;
}
このコードは、xhtml ページでは常に 0、つまり属性が無効です。他の属性を判断するには、新旧の標準との互換性を保つために、属性の利用可能性を判断する必要があります。

インターネットからのテキストの引用:

引用

WEB 標準を適用すると、ScrollTop 属性が無効になります。 ！ ！
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">


この段落を追加すると、document.body.scrollTop は常に等しくなります。 0 に


body onscroll = "alert(document.body.scrollTop);" はトリガーされません。


解決策:

使用:

document.documentElement.scrollTop

例 1:

varscrollPos; >if (typeof window.pageYOffset != '未定義') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != '未定義' &&
document.compatMode ! = 'BackCompat') {
スクロールポス = document.documentElement.scrollTop;
}
else if (typeof document.body != '未定義') {
スクロールポス = document.body.scrollTop; 🎜>}
alert(scrollPos);


例 2:

function WebForm_GetScrollX()
{
if (__nonMSDOMBrowser)
{
return window.pageXOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollLeft)
{ document.documentElement.scrollLeft ;
>}


-----------------------------------------------------
pageYOffset は netscape のものです
document.body.scrollTop と document.documentElement.scrollTop は IE 用ですが、実際の違いはわかりません。 documentElement.scrollTop が xhtml 互換であることだけがわかります (strict を使用しています)