Скрулващ хедър със jQuery

Автор: Hous

<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 файл!

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