Фиксированный header

@maximillian77 · Регистрация: 07.07.2014

Студворк — интернет-сервис помощи студентам

Добрый день ув. пользователи! Как примерно можно сделать header как здесь liquidplanner.com, что бы он плавно доходя до текста немного сжимался и далее оставался вверху? Подскажите пожалуйста.

@Shakalaka · 28.04.2016, 11:31

maximillian77,
http://getbootstrap.com/javascript/#affix
пример http://www.w3schools.com/boots... &stacked=h

@VardSeller · 28.04.2016, 11:46

Я обычно такую конструкцию ставлю.

JavaScript
1
2
3
4
5
6
7
8
9
var num = 160;
 
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > num) {
    $('#header_nav').addClass('fixed').addClass('slideDown');
  } else {
    $('#header_nav').removeClass('fixed').removeClass('slideDown');
  }
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    margin-top: -160px;
    margin-left: 90px;
    opacity: 0.9
}
.slideDown {
    animation-name: slideDown;
    animation-duration: 1s;
    animation-timing-function: ease;
    visibility: visible !important
}
@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateY(0%)
    }
}

#header_nav замени на id или class своего меню. Тут он при прокрутке более 160px присваивается два класса и уже к классам прописываются стили.

@maximillian77 · 28.04.2016, 13:40 **[ТС]**

VardSeller, спасибо, попробую.

Добавлено через 1 час 22 минуты
VardSeller, можешь подсказать пожалуйста, как обратиться через css к img в таком дереве, только если у неё в предках есть класс sticky. Этот класс при скроле набрасывает js.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header>
<nav class="navbar navbar-default navbar-static-top [B]sticky[/B]">
<div class="container">
<div class="navbar-header">
<button type="button" class="">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="" alt="Online" class="hidden-xs" height="52" width="215">
<img src="" alt="Online" class="hidden-lg hidden-md hidden-sm" height="46" width="180">
</a>
</div>
</div>
</nav>
</header>

@VardSeller · 28.04.2016, 14:00

CSS
1
2
3
.sticky img {
 
}

Сообщение от maximillian77

Этот класс при скроле набрасывает js.

Не понял..?

@maximillian77 · 28.04.2016, 16:20 **[ТС]**

Не понял..?

js добавляет class при скроле.

VardSeller, спасибо. P.s Не подскажишь пожалуйста, при position: fixed у headera, под него зализит контент, что это может быть?

@VardSeller · 29.04.2016, 08:01

maximillian77, а ну да. Юзай позиционирование контента. Но это уже не в тему

Отблагодари в карму)

Добавлено через 14 часов 47 минут
maximillian77, спасибо)

Комментарий модератора

Запрещено накручивать репутацию и другую статистику пользователя любым способом, включая создание пользователей-клонов, а также склонять (агитировать) других пользователей к ее изменению.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559

	Фиксированный header 28.04.2016, 11:07. Показов 6676. Ответов 6 Метки нет (Все метки) Добрый день ув. пользователи! Как примерно можно сделать header как здесь liquidplanner.com, что бы он плавно доходя до текста немного сжимался и далее оставался вверху? Подскажите пожалуйста. 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	28.04.2016, 11:31
	maximillian77, http://getbootstrap.com/javascript/#affix пример http://www.w3schools.com/boots... &stacked=h 1

Фиксированный header

Решение