Лепкав хедър със скролиране.
08-11-2012
Сега ще започнем с кодът сега ще ви го напиша долу и после ще обясня кой ред за какво служи.


#header{
width: 100%;
height: 66px;
background-color: blue;
position: fixed;
top: 0px;;
left: 0px;
}

#header_wrap{
width: 900px;
height: 66px;
margin: 0 auto;
}


Така ще започна с това първо да дефинираме #header и #header_wrap в нашия css файл.

width: 100%;


С този ред задаваме на нашия хедър да се разпъва на 100% при каквато и да е резолюция.


height: 66px;
background-color: blue;


С height задаваме височината на нашия хедър по желание както решите Вие, аз съм си я направил 66 пиксела, с background-color задавате цвят на фона аз съм го направил син но може да ползвате и изображение както си решите.

Идва и същинската част:


position: fixed;
top: 0px;;
left: 0px;


С position: fixed; задаваме на нашия хедър да се скролва с завъртане на скролът а с top и left му задаваме къде да седи при мен това е да е винаги най в ляво и най горе.

Следвъщата стъпка е нашето id header_wrap в него ще седи съдържанието на хедъра този допълнителен DIV го пишем за да може винаги съдражанието под каквато и да е резолюция да седи в центъра на хедъра.


width: 900px;
height: 66px;
margin: 0 auto;


С width и height му задаваме дълина и ширина по желание принципно височината трябва да е колкото на хедъра с margin: 0 auto; е основната част трябва да бъде точно така, защото чрез него ние задаваме на съдържанието на хедъра да седи винаги в центъра на страницата.

Това е урока написън по желание на @Hous от мен за web-tourist.
Може да го ползвате спокойно във вашия сайт Cool.
Забранявам копирането за други сайтове за уроци без мое съгласие.
Успех!!


/ Трябва да сте регистриран за да напишете коментар /
От: Jorko
23:09 08-11-2012
Ето и едно демо да видите.
Работи под всички браузъри без бъгове включително ie7+ по надолу не съм го тествал : )
От: Jorko
23:09 08-11-2012
Оп забравих демото в първия коментар ето го и него http://header-demo.free.bg/
От: Hous
1:08 10-11-2012
Знаех,че точно такъв тип ще дадеш ,разликата между това и онова е ,че онова може да си стой където поискаш било то 2-3-4 място в сайта и след като скрулнеш се "отчита" и се "лепи" горе в сайта,което изглежда по-професионално.Иначе този урок е по-лесен и за над 50% от случаите би свършил работа.
:)
От: Jorko
11:10 10-11-2012
"че онова може да си стой където поискаш било то 2-3-4 място" не схванах? как където поискаш
От: Hous
13:24 11-11-2012
Ами в този пример със css хедърът стой винаги лепнат най-отгоре,а ако искаш да поставиш реклама или нещо над него,а те да не се скрулват ?
Или примерно не искаш хедъра а търсачката само да се мести заедно със скрул?
Трудно е да се обясни,просто копирай кода от моя вариант ,сложи над самия див някакви други елементи,и скрулни надолу...
:)
От: Jorko
17:53 11-11-2012
Разбрах те какво искаш то и при мен може да е така само трябва да добавя маргин малко : ) и готово
От: Hous
10:07 22-11-2012
Без jQuery не виждам как ще отчита колко точно и кода да се добавя този маргин,но нищо.
:)
От: mo7ika
7:59 15-03-2013
Урока е фаянс. Също така е основата на някои модерни ефекти които забелязвам се използват все повече. Да кажем,че въпросния ни хедър е висок 50пх и като скролнем да не се скролира със същата височина а тя да стане 30пх, или обратното. Ако добавите и този като допълнение ще е супер.
От: Hous
12:26 18-03-2013
@мо7иката
Аз съм дал урок с Jquery които е леко по "умен" самия хедър се залепя само в случай че скрулнеш и не е постоянно със position:fixed; там при него може да се направи така,че ако е 50px висок примерно,при скрул да стане 30.
1