Вед-дев, Сео, Манимейкинг

Фиксированная шапка при прокрутке страницы

Часто на веб-сайтах вы можете наблюдать фиксированные шапки. Фиксированные шапки - это когда вы скроллите вниз страницу, а шапка сайта не исчезает из вашего виду, то есть, всегда остается вверху, не зависимо от того, как далеко вы прокрутите вниз. Сегодня мы рассмотрим способ при помощи jQuery 1.7:

HTML разметка:

<header></header>
<div class="content">
<p>
Сюда вставляете очень много контента, для того чтобы появился вертикальный скролл...
</p>
</div>

CSS стили:

header {
    position: relative;
    width: 100%;
    height: 60px;
    background: red;
}

header.clone {
    position: fixed;
    top: -60px;
    transition: 0.2s top ease-in;
}

body.down header.clone {
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

Волшебный JS код:

(function($) {
    $(document).ready(function() {
        var $header = $("header"),
            $clone = $header.before($header.clone().addClass("clone"));
       
        $(window).on("scroll", function() {
            var fromTop = $(document).scrollTop();
            $("body").toggleClass("down", (fromTop > 200));
        });
    });
})(jQuery);

Данная техника клонирует ваш хедер, а оригинальный оставляет его на прежней позиции. fromTop > 200 - означает при скролле вниз на 200 пикселей, для body добавится класс "down".



Комментарии (0)

Разделы

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 4 месяца 3 недели назад
    Спасибо. С Новым Годом! 
  • Den 5 месяцев 2 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 5 месяцев 2 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 6 месяцев 2 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 6 месяцев 2 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 6 месяцев 2 недели назад
    захожу на mysql через ssh по команде  
  • admin 6 месяцев 2 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 6 месяцев 3 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 7 месяцев 4 дня назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 8 месяцев 2 недели назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!