Фиксируем шапку сайта при прокрутке страницы.

Допустим у вас важная информация например контакты находятся в шапке и вы хотите что бы они всегда были на веду у клиента или просто хотите что основная навигация всегда была под рукой.

То можно просто зафиксировать шапку сайта что бы при прокрутке она всегда была на одном месте при прокрутке страницы. Для того что бы это реализовать нам понадобится немного подправить стили (CSS).

И так HTML:

<div id="head">
<!-- тут располагается код нашей шапки -->
</div>
<div id="content">
<!-- Следующий блок например с основным контентом -->
</div>

И теперь добавим необходимые стили:

#head{
    width: 1000px;
    height: 60px;
    position: fixed;
    background: #fff;
    z-index: 1000;
}
/* Что бы наш следующий блок не заезжал под шапку 
как только страница загрузилась добавим отступ. */
#content {
    margin-top: 60px;
}

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.