<header>
<div id="el1">*Здесь логотип*</div>
<div id="el2">*Здесь слоган*</div>
<div id="el3">*Здесь телефон*</div>
</header>
Ничего необычного только отмечу, что интересующие меня элементы имеют свой id. Я не буду сейчас расписывать всю таблицу стилей, никогда не понимал, зачем это делают в разного рода мануалах, если всё равно дизайн под свой сайт делать. Укажу только основные моменты:
header{
position: fixed; /* фиксирует шапку "наверху" */
z-index: 100; /* поднимаем над всеми элементами, чей z-index ниже 100 */
}
И:
#el1.dis{display:none;}
#el2.dis{display:none;}
#el3.dis{display:none;}
Здесь обращу внимание на такой момент, что я указал все элементы, таким образом, если Вам что-то необходимо оставить, то нужно удалить соответствующую строку либо из CSS, либо уже потом из программного кода, например, чтобы остался логотип, нужно удалить вот эту строку:
#el1.dis{display:none;}
Дальше переходим к коду jquery. Первым делом необходимо интегрировать файл jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Это надо делать между тегами <head> и </head>.
После переходим к программной составляющей. Здесь есть два варианта, вариант «простой», если у Вас всё завязано на одном только описании header’а будет достаточно сделать строку такого вида (это тоже между <head> и </head>):
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("dis");
}else{
$('header').removeClass("dis");
}
});
</script>
И соответственно в CSS у Вас будет 2 записи:
header{/* Описание header'а, который отображается до прокрутки */}
header.dis{/* Описание header'а, который отображается после прокрутки */}
Либо же просто изменить шрифт всех элементов Вам мало и есть необходимость какие-то из них вообще скрыть, тогда запись будет выглядеть так:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
jQuery('#el1').addClass("dis");
jQuery('#el2').addClass("dis");
jQuery('#el3').addClass("dis");
}else{
jQuery('#el1').removeClass("dis");
jQuery('#el2').removeClass("dis");
jQuery('#el3').removeClass("dis");
}
});
</script>
Чтобы "сохранить" выше упомянутый логотип, убираем из кода #el1:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
jQuery('#el2').addClass("dis");
jQuery('#el3').addClass("dis");
}else{
jQuery('#el2').removeClass("dis");
jQuery('#el3').removeClass("dis");
}
});
</script>
