1. Introduction

  • For the convenience of website development hereby prepared
  • Inside the body of the site that needs to be modified in HTML (increase or decrease of individual modules)
  • The div or other content in the module is positioned by means of margin-top float
  • Js code if the site needs high integrity of the home page content, you can set the height of the site body

 

2. The HTML code

<! -- Site body -->
    <div class="webSubject">
        <! -- Site header background color -->
        <div class="subjectOnlytop">
                <span class="logo">logo</span>
                <span class="loginzc">registered</span>
                <span class="login">The login</span>
        </div>
        <! -- Simulation module -->
        <div class="subjectOnlytopsimulation"></div>
        <! -- Module 1 -->
        <div class="webSubjectx" id="suba">
            <! --> < div style = "box-sizing: border-box; color: RGB (51, 51, 51);
            <! -- Custom module 1 -->
            <div class="modleOne"></div>
            <! -- Custom module 2 -->
            <div class="modleTwo"></div>
        </div>
        <div class="webSubjectx" id="subb"></div>
        <div class="webSubjectx" id="subc"></div>
    </div>
Copy the code

 

3. The CSS code


body{
    background-color:rgb(45.49.45);
    text-align:center;
}
/** Site header style */
.subjectOnlytop{
    position: fixed;
    width:1366px;
    height:50px;
    line-height:50px;
    left:0px;
    top:0px; 
    background-color:# 000;
    color:#fff;
}

/** logo */
.logo{
    float: left;
    margin-left:20px;
}
/** login */
.login{
    float:right;
    margin-right:20px;
    cursor:pointer;
    border:1px solid #fff;
    height:20px;
    line-height:20px;
    margin-top:15px;
    border-radius:5px;
}
.loginzc{
    float:right;
    margin-right:40px;
    cursor:pointer;
    border:1px solid #fff;
    height:20px;
    line-height:20px;
    margin-top:15px;
    border-radius:5px;
}
/** Body style */
.webSubject{
    position:fixed;
    width:1366px;
    height:768px;
    left:0px;
    top:0px;
    overflow: auto;
}
/** The size of each module station */
.webSubjectx{
    height:600px;
}
/** The simulation module is similar to the above content, the emphasis is on the height */
.subjectOnlytopsimulation{
    height:50px;
}
/** module a content **/
#suba{
    background-color:rgb(153.238.227);
}
/** Module 2 contents **/
#subb{
    background-color:rgb(153.255.175);
}
/** module three contents **/
#subc{
    background-color:rgb(153.243.255);
}
/** Custom module a */
.modleOne{
    width:100%;
    height:50px;
    background-color:rgb(50.54.54);
    z-index: 101;
}
/** Custom module 2 */
.modleTwo{
    width:100%;
    height:300px;
    background-color:rgb(57.70.70);
    z-index: 101;
}
Copy the code

 

4. The js code

// Project entry
var porject = {
    / / initialization
    init: function () {
        porject.addInitStyle();
    },
    // Initialize the style
    addInitStyle: function () {
        if (porject.bodyHeight < porject.bodyWidth) {// PC side website
            // Site header
            $(".subjectOnlytop").css({ "width": porject.bodyWidth + "px"});
            $(".webSubject").css({ "width": porject.bodyWidth + "px"."height":(porject.bodyHeight)+"px"});
            
        } else {// Mobile site

        }
    },
    bodyHeight: document.documentElement.clientHeight,
    bodyWidth: document.documentElement.clientWidth,
     

};

// Start loading
$(document).ready(function () {
    porject.init();
});
Copy the code

 

5. Demo pictures

 

The main purpose of this code is to achieve the head of the site does not move below the scrolling effect of the content, and some basic functions to facilitate the future development of the use of interested key collection, continuous update

ok