Закрепление заголовка вверху страницы

При верстке сайтов бывает необходимо закрепить  часть или весь заголовок вверху страницы, чтобы при скроллинге он всегда был виден. Например, поисковая строка будет всегда доступна, независимо от того, какой фрагмент страницы вы просматриваете.

Я делал это с помощью следующего скрипта:

1. <script type=»text/javascript»>
2. $(function(){
3. $(window).scroll(function() {
4. var top = $(document).scrollTop();
5. if (top < 40) $(«.second_level»).css({top: ‘0’, position: ‘relative’});
6. else $(«.second_level»).css({top: ‘0’, position: ‘fixed’});
7. });
8. });
9. </script>

Разберем пример.  В пятой строке проверяем, где находися верх страницы и если он выше, чем 40 пикселей, прижимаем его к топу и делаем фиксированным DIV class .second_level

Теперь прописываем стиль .second_level элементу страницы и видим готовый результат.