固定された固定要素

1.css

< スタイルタイプ= "テキスト/ CSS" > 
.elementFixed { 
    位置固定されました
    トップ0 ; 
} 
</ スタイル>

2.body

< 本体> 
  < 入力タイプ= "隠れた" ID = " scroll_return " = "" >  
</ ボディ>

3.script

< スクリプトタイプ=「テキスト/ JavaScriptを」> 
/ * * 
 *要素は、ブラウザの上部にスクロールされる固定要素、固定された固定
 * firstDiv:最初の要素
 * secondDiv:第二要素
 * firstDiv + secondDiv:変形を回避するには、ドキュメント、firstDiv secondDiv幅の外に流れることになるので、固定
 * / 
機能fixedDiv(firstDiv、secondDivを){
     // 要素を標的とするブラウザの上部からの距離
    VAR fixedH = $(#firstId ).offset ().top;
     // ウィンドウのスクロールバーイベントの追加
    $(ウィンドウ).scroll(関数(){
         // スクロールバーのスライド距離
        VARをscrollH = $(この).scrollTop();
         // 要素を標的とするブラウザの上部からの距離よりも長い距離をスライドスクロールバーは、固定されない固定に対し
        IF (scrollH > fixedH){
             // かどうかを返し
            するvar scroll_returnは= のdocument.getElementById(" scroll_return " ).Valueの;
             // が戻り値
            IF " scroll_return " == scroll_return){
                 リターン trueに; 
            } 
            // はconsole.log("固定スクロール距離: "scrollH +); 
            $(" #tableTbodyId )。 HTML(firstDiv + secondDiv)。
            $(" #TableTheadId " ).addClass("elementFixed " );
             // 代入戻り、次の追加していきません
            のdocument.getElementById(" scroll_return " ).Valueの=  " scroll_returnを" ; 
        } {
             // はconsole.log( "固定されていない、転がり距離: "+ scroH); 
            $(" #tableTbodyId " )の.html(secondDiv); 
            $(" #tableTheadId " ).removeClass(" elementFixed " );
            //空のローリング割り当て
            のdocument.getElementById(" scroll_return " ).Valueの=  "" ; 
        } 
    })
} 
// クリアスクロールイベント
$(ウィンドウ).unbind(' スクロール' );
 </ スクリプト>

 

おすすめ

転載: www.cnblogs.com/mjtabu/p/11592594.html