周りのスライド固定メニューバー

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
        。
            高さ：40ピクセル; 
            位置：固定; 
            トップ：10pxの; 
            右：0 ; 
            テキスト整列：センター; 
            行の高さ：40ピクセル; 
            カーソル：ポインタ; 
            色：#FFF ; 
        } 
        
        .CON { 
            位置：絶対。
            トップ：0 ;
            左：0 ; 
            背景：darkcyan 。
            幅：200pxの。
            高さ：40ピクセル; 
            Zインデックス：-1 。
        } 
    </ スタイル> 
    < スクリプトSRC = "animate.js" > </ スクリプト> 
</ ヘッド> 

< 身体> 
    < divのクラス= "バー" > 
        < スパン> ← <
        < divのクラス= "詐欺" >意见反馈</ DIV > 
    </ DIV > 
    < スクリプト> 
        のvar バー= document.querySelector（' .BAR ' ）;
        VaRのCON = document.querySelector（' .CON ' ）;
        VaRのスパン= document.querySelector（' スパン' ）; 

        bar.addEventListener（' MouseEnterイベント' 、（）{- 160 ）。
        }）; 
        bar.addEventListener（' mouseleave ' 、関数（）{ 
            アニメーション（CON、0 ）; 
        }）; 

        関数アニメーション（OBJ、ターゲット）{ 
            てclearInterval（obj.timer）。
            obj.timer = のsetInterval（関数（）{
                 VARのステップ= （ターゲット- obj.offsetLeft）/  10 ; 
                ステップ= ステップ>  0 ？Math.ceil（ステップ）：Math.floor（ステップ）。
                もし（con.offsetLeft == ターゲット）{ 
                    てclearInterval（obj.timer）。
                    span.innerHTML =  ' ← ' ; 
                } 
                obj.style.left = obj.offsetLeft + 工程+  ' ピクセル' ; 
            }、30 ）; 
        } 
    </ スクリプト> 
</ ボディ> 

</ HTML >