Четверг, 13 Сентябрь 2018 11:08

Изменение шапки сайта при прокрутке

Вот уж не думал, что будет головной болью оформить изменение шапки сайта при прокрутке скролла, раз Вы это читаете, то скорей всего для Вас это тоже оказалось болью головной. Собственно весь процесс будет разделён на 2 этапа, этап первый создание шапки с помощью таблицы стилей CSS, выглядеть это будет так, xHTML блок шапки:

<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>

Спонсоры: