JS天井効果を実現

シンプルな天井効果
<！DOCTYPE> 
<HTML> 
<HEAD> 
<スタイルタイプ= "テキスト/ cssの"> 
    ボディ{ 
        パディング： 0 ; 
        マージン： 0 ; 
    } 
    #nav { 
        幅： 100％ 。
        高さ：60PX; 
        背景：＃39F; 
        色：#FFF; 
        行 - 高さ：60PX; 
        テキスト - 揃える：センター; 
        パディング： 0 ; 
        マージン： 0 ; 
    } 
    #nav李{ 
        フロート：左; 
        幅： 20％ ;
        高さ：60PX。
    } 
    .fix { 
        位置：固定されました。
        トップ： 0 ; 
        左： 0 ; 
        Zインデックス：1。
    } 
    .hader - IMG { 
        位置：固定されました。
        左： 0 ; 
        トップ： 0 ; 
    } 
    .content { 
        位置：相対。
        Z -index：2 。
    }
 </スタイル> 
</ head>の

<divのクラス= "ラップ"> 
    <DIV CLASS = "hader-IMG">
        <IMG SRC =「https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565094369494&di=7e1e19d2b2d913d3aecbe4fcc67b034a&imgtype=0&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201710%2F27%2F6239258bb41622006605f967200b806b "Altキー=" ">の.jpg 
    </ DIV> 
    <DIV CLASS ="コンテンツ"> 
        <DIV CLASS ="ヘッダ「> 
            の<H1>モールタイトル<>の/ H1 
            <P>字幕の字幕字幕字幕字幕を字幕字幕</ P-> 
            <UL上記ID = "NAV"> 
                <LI>ナビゲーションコンテンツ</ LI> 
                <LI>ナビゲーションコンテンツ</ LI> 
                <LI>ナビゲーションコンテンツ</ LI> 
            </ UL> 
        </ DIV >
        <DIV CLASS =「CON」> 
            <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> 
            <P>これは、天井効果ああ</ P>天井の効果である
            <P>これは天井の効果である、天井効果ああ</ P> 
            <P>これは天井効果があり、天井効果ああ</ P> 
        </ div> 
    </ div> 
</ div> 

<スクリプトタイプ= "テキスト/ JavaScriptを"> 
headerNavせ =のdocument.getElementById（ "NAV" ）;
 // プレースホルダの位置位置 
LET = RECT headerNav.getBoundingClientRect（）;
 // のブラウザウィンドウにナビゲーションバーに相対ページを取得し 
てみましょうchildDemoe =のdocument.createElement（ "DIV" ）;
headerNav.parentNode.replaceChild（childDemoe、headerNav）。
childDemoe.appendChild（headerNav）; 
childDemoe.style.height = rect.height + "PX" ;

// ページの最上部からの距離を取得する
VAR headerNavleTop = headerNav.offsetTop;
 // スクロールイベント 
document.onscroll = 機能（）{
     // 現在のスクロール距離を取得
    するvar BTOP = document.body.scrollTop || document.documentElement.scrollTopを。
     // スクロール距離は、ナビゲーションデータの先頭からの距離よりも大きい場合には
    IF（BTOP> headerNavleTop）{
         //は、ナビゲーションバーに固定するように設定 
        headerNav.className =「clearfixの修正を」; 
    } 他{
         //は修正削除
        = headerNav.className "clearfix" ; 
    } 
}
 </ SCRIPT> 
</ HTML> 


後続の最適化
おすすめ
