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

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


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:


"logo" >
" http://www.javascriptkit.com" > "jksitelogo.gif" />
 
"header" >

Some header content

 
"contentarea" >
Main Content Start here
more text here
more text here