JS ベースのページフローティングボックスを実装するためのサンプルコード

スクロールバーを下に引くと、主にposition:fixed;スタイルにより、フローティングボックスは同じ位置に留まります。

ある程度下にスクロールしてフッターに近づくと div が消えるように js で制御し、上にスクロールすると再び表示されます。

<!DOCTYPE html> 
<html> 
<ヘッド>
<タイトル></タイトル>
<スタイル タイプ="text/css">
.div1 {
    高さ:2000ピクセル;
}
.div2 {
    幅:100%;
    高さ:35px;
    背景色:#3399FF;
    上マージン:100px;
}
.div2_1{
    位置:固定;
    幅:100%;
    高さ:35px;
    zインデックス:999;
    背景色:#3399FF;
    上:0px;
    _position:絶対;
    _bottom:自動;
    _top:式(eval(document.documentElement.scrollTop));
}
 .div2_2
    {
        表示:なし;
    }

 
</スタイル>
<script type="text/javascript">
window.onscroll=関数(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    div2 要素を取得します。 
    t>= 100の場合{ 
        div2.className = "div2_1";
    }それ以外{
        div2.className = "div2";
    } 
}
</スクリプト>
</head>
<本文>
<divクラス="div1">
    <div id="div2" class="div2"></div>
</div>
</本文>
</html>

補足: 右側のフローティングボックスを実装するためのJavaScript

HTMLコード:

<本文>
  <div id="div1">
  </div>
</本文>

CSSコード:

#div1{
    高さ:150px;
    幅:100ピクセル;
    背景:赤;    
    位置:絶対;
    右:0px;
    下:0px;
}
体{
    高さ:2000ピクセル;
}

JavaScript コード

//フォームがスクロールするとき window.onscroll=function (){
      var obj = document.getElementById("div1");
      // ブラウザの互換性を考慮する（スクロールの高さ）
      var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                    // ブラウザの表示領域の高さ + オブジェクト自体の高さ + カールされた高さ // obj.style.top = document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
    //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
    //移動(targetLen);
    //このようにして、基本的なキャラクターが完成しました。 //方法 2: 結果として、キャラクターは揺れます。 //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
    //移動(targetLen);
    var targetLen = parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
    移動(ターゲット長さ)
    //このようにして基本的な機能が実現されます。}
  //ここでバッファ移動を追加して、これらの操作を簡単に行えるようにします var Timer = null;
  関数move(iTarget){
      clearInterval(Timer); // 最初にクリア var obj=document.getElementById("div1");
      Timer=setInterval(function (){ //上のオブジェクトからの距離 var speed=(iTarget-obj.offsetTop)/4;
           速度=速度>0?Math.ceil(速度):Math.floor(速度);
           //まず速度を取得します if(obj.offsetTop==iTarget){
               clearInterval(timer); //目的地に到達したら、要素をクリアします}else{
               obj.style.top=obj.offsetTop+speed+'px';
           }
      },30)
      //バッファリングの練習をしてみましょう}

これで、JS ベースのページフローティングボックスを実装するためのサンプルコードに関するこの記事は終了です。より関連性の高い js ページフローティングボックスのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: