ヘッダーを画面上部に固定させたい

画像内のヘッダーに隠れたタイトルを、最初はヘッダーの上に表示させた状態から、画面をスクロールしたらヘッダーが常に画面上部に固定される形にしたいのですが、色々試してみても、半端な位置にヘッダーが固定されたままだとかタイトル部分が消えたりだとかどうしても上手くいきません・・・。下記に現在のソースコードを記載しますので、どうか解決方法と色々教えてください！
画像

HTML5
1コード
2 <body>
3 <div class="title">
4	 <img src="img/ChikeZon.png"  alt="title_img">
5 </div>
6  <header>
7   <ul>
8    <li><a href="Go2goods">HOME</a></li>
9    <li><a href="Go2info">INFO</a></li>
10    <li><a href="Go2fixed">LOGIN</a></li>
11    <li><a href="Go2cart">CART</a></li>
12   </ul>
13  </header>
14</body>

CSS3
1コード
2 
3.title {
4
5}
6
7header {
8	background: #28aae1;
9	color: #fff;
10	list-style: none;
11    z-index: 1000;
12    position: fixed;            /* ヘッダーの固定 */
13    top: 0px;                   /* 位置(上0px) */
14    left: 0px;                  /* 位置(右0px) */
15    width: 100%;                /* 横幅100% */
16    height: 38px;              /* 縦幅140px */
17}
18
19header ul {
20}
21
22header li {
23	display:inline-block;
24}
25
26header li a{
27    display:block;
28    width:100%;
29    text-decoration:none;
30    padding:10px 15px;
31    -webkit-transition: 0.8s;
32	-moz-transition: 0.8s;
33	-o-transition: 0.8s;
34	-ms-transition: 0.8s;
35	transition: 0.2s;
36	color: rgb(255, 255, 255);
37}
38
39header li a:hover {
40	background-color: #46EEFF;
41	color: black;
42}
43
44