Скрулващ хедър със jQuery
03-11-2012

<div id="header" style="color:#ddd;background:#777;border:1px #ccc dashed;width:100%;">
Logo | Menu | Menu | Search
</div>

<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test<br><br><br>
test test test


Общо взето всичко е един нормален HTML код,самият div Който държи хедърът ,който ще се скрулва и ще се вижда колкото и надолу да скрулнем във сайта,е със id header , като може да си го стилирате както искате по този начин: във някакъв css файл или STYLE таг слагате
#header{/*tuk vsqkakvi svoistva kato */
background:;
border:;
width:;
height:;
}


И сега разбира се остана да сложим jQuery Кодът:
Първо слагаме последната версия на jQuery
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


след което


<SCRIPT>

//sled kato e gotov saita startirame funkciqta
$(document).ready(function() {

//tuk moje da smenite #header sys vashiq id
var div = $('#header');

var start = $(div).offset().top;


//tuk pri otchinate na scroll , nashiq div se "zalepq" nai-gore na nashiq vidim prozorec(viewport) i stoi tam
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});

});
</SCRIPT>


Източник:Някакъв форум(ако намеря линка ще го постна) + малка част от мен.

За демо,копирайте кодовете и ги поставете във html файл!

Дано е полезен на някой! :)






/ Трябва да сте регистриран за да напишете коментар /
От: Jorko
14:35 06-11-2012
Какъв е смисъла от това като мога да го направя с 2 реда css?
От: t0shk0
19:09 06-11-2012
То в повечето случаи има и друг вариант, въпросът е в това да се покаже как става чрез използването на различни методи и техники. Все пак на никого не може да навреди :)
От: Jorko
20:58 06-11-2012
Да но най лесния и ефективния и краткия начин е с CSS :)
От: Hous
9:40 08-11-2012
Всеки си преценя,за мен този метод е най-добрия.
А пък и идеята е че не бъгва.
@Jroko можеш да пуснеш урок ако смяташ ,че е по-лесен и ефективен. :)
От: IzKuFeLiQqQqQ
23:56 13-05-2013
Ето и демо http://jsfiddle.net/u26bX/
От: Hous
13:35 24-05-2013
Аз да добавя смисъла на този урок и всеки друг position fixed хедър,е че хедърът не е фикснат докато не се скрулне сайта.Преди това позицията му може да е навсякъде,а след скрул се залепя, и при обратно връщане най-горе се връща при първоначалната позиция.Погледнете демотата. :)
1