首先，让我们建立一个基本的布局，我们将使用，最终使头粘英寸。这是一个简单的页面，上面有一个标志部分，一个标题部分，最后一个主要内容部分：

CSS：

body{

    
margin: 0;

    
padding: 0;

}

body *{

    
-webkit-box-sizing: border-box;

    
-moz-box-sizing: border-box;

    
box-sizing: border-box;

}

div
#header{

    
width: 100%;

    
height: 100px;

    
background: lightblue;

    
margin: 0;

    
padding: 5px;

}

div
#contentarea{

    
padding: 10px;

}

HTML:

<div id=
"logo"
>

<a href=
"
http://www.javascriptkit.com"
><img src=
"jksitelogo.gif" 
/></a>

</div>

<div id=
"header"
>

<p>Some header content</p>

</div>

<div id=
"contentarea"
>

<b>Main Content Start here</b>

more text here

more text here

</div>

ITPub博客

使用jQuery和CSS创建粘性标题栏