js realize ceiling effect

Simple ceiling effect
<!DOCTYPE>
<html>
<head>
<style type="text/css">
    body {
        padding:0;
        margin:0;
    }
    #nav {
        width:100%;
        height:60px;
        background:#39f;
        color:#fff;
        line-height:60px;
        text-align:center;
        padding:0;
        margin:0;
    }
    #nav li {
        float:left;
        width:20%;
        height:60px;
    }
    .fix {
        position:fixed;
        top:0;
        left:0;
        z-index: 1;
    }
    .hader-img {
        position: fixed;
        left: 0;
        top: 0;
    }
    .content {
        position: relative;
        z-index: 2;
    }
</style>
</head>

<div class="wrap">
    <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 .jpg "Alt =" "> 
    </ div> 
    <div class =" Content "> 
        <div class =" header "> 
            <h1 of> Mall title </ h1 of> 
            <P> subtitle subtitle subtitle subtitle subtitle subtitle subtitle </ the p-> 
            <ul the above mentioned id = "NAV"> 
                <li> navigation content </ li> 
                <li> navigation content </ li> 
                <li> navigation content </ li> 
            </ ul> 
        </ div >
        <div class = "CON"> 
            <P> This is the effect of a ceiling, the ceiling effect ah </ p> 
            <P> This is the effect of a ceiling, the ceiling effect ah </ p>
            <P> This is the effect of a ceiling, the ceiling effect ah </ p> 
            <p> This is a ceiling effect, ceiling effect ah </ P> 
            <p> This is a ceiling effect, ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is a ceiling effect, ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is a ceiling effect, ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P > this effect is a ceiling, ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P>This effect is a ceiling, ceiling effect ah </ p> 
            <P> This is the effect of a ceiling, the ceiling effect ah </ p> 
            <P> This is the effect of a ceiling, the ceiling effect ah </ p >
            <p> This is a ceiling effect, ceiling effect ah </ P>
headerNav.parentNode.replaceChild(childDemoe, headerNav);
            <P> This is the effect of a ceiling, the ceiling effect ah </ p >
            <p> This is a ceiling effect, ceiling effect ah </ P> 
            <p> This is a ceiling effect, ceiling effect ah </ P> 
            <p> This is a ceiling effect, ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is the effect of a ceiling, the ceiling effect ah </ P> 
            <P> this is a ceiling effect, ceiling effect ah </ P> 
        </ div> 
    </ div> 
</ div> 

<Script type = "text / JavaScript"> 
let headerNav = document.getElementById ( "NAV" );
 // placeholder location position 
let = RECT headerNav.getBoundingClientRect ();
 // get page in the navigation bar relative to the browser window of 
the let childDemoe = document.createElement ( "div" ); 
childDemoe.appendChild (headerNav);
childDemoe.style.height = rect.height + "px";

// get the distance from the top of the page 
var headerNavleTop = headerNav.offsetTop;
 // scroll event 
document.onscroll = function () {
     // Get the current scroll distance 
    var BTOP = document.body.scrollTop || document.documentElement.scrollTop;
     // If the navigation data is greater than the roll distance from the top of the 
    IF (BTOP> headerNavleTop) {
         // set to fix the navigation bar 
        headerNav.className = "clearfix fix" ; 
    } the else {
         // remove Fixed
        = headerNav.className "clearfix" ; 
    } 
}
 </ Script> 
</ HTML> 


subsequent optimization
js realize ceiling effect

Guess you like
