Сайты с анимированным header?

Question

[KononovD]

Здравствуйте, можете накидать сайтов, у которых header "сворачивается" и прилипает к верхней границе?
Не тот, что выпадает сверху, а у которого одни элементы пропадают, другие плавно меняют расположение.
Думаю, те, кто такое видел - поймет о чем речь :D
Спасибо

Comments

[KononovD]

VicTHOR, в том числе, мне нужно что бы при скролле перестраивались элементы в шапке, нужен просто пример

Answer 1

[gh0sty]

Скорее всего речь о position: sticky.
Вот ссыль, там +- подробно.

Comments

[KononovD]

в том числе, мне нужно что бы при скролле перестраивались элементы в шапке, нужен просто пример

[gh0sty]

KononovD, тип при скролле страницы?
Вот на JQuery, ставь брейкпоинты и накидывай свои классы:

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 200) {
        $('.content').addClass('your-class');
    }   
    if ($(this).scrollTop() <= 200) {     
        $('.content').removeClass('your-class');
    }
});

[runprogr]

KononovD, Это все легко делается добавлением и удалением классов при прокрутке с помощью js

[KononovD]

runprogr, сделаете из такого:

такое:

?
легко, классами?

[gh0sty]

KononovD, да. Но, во-первых, мы не работаем за бесплатно))) И если ты задал вопрос, это не обязывает нас написать весь код за тебя. Во-вторых, у нас нет четкого задания, мы не сможем изобрести сферического коня в вакууме.

[KononovD]

gh0sty,

Но, во-первых, мы не работаем за бесплатно

я не просил делать за меня мою работу)

И если ты задал вопрос, это не обязывает нас написать весь код за тебя

изначально вопрос был о примерах сайтов с хитрыми шапками

у нас нет четкого задания

все, что написано у меня в тз по этому поводу "При скроле хэдер сворачивается в другой вид (прилипшее меню)."
так что у меня тоже нет достаточно четкого задания) но мне, судя по всему, придется изобрести сферического коня в вакууме D;

[gh0sty]

KononovD, Лол, сорри. Просто листал тостер, да и сам с запарой встретился и чет мельком прочитал твой вопрос, и вижу что написал сам +- адекватно. Тупо накинул пару строчек, просто думал, что тебе надо накодить прям бл*ть механизм взаимодействия, с проработанными классами на 200 строк с потолка))) Чел, просто или спроси тз, или делай на отъебись (т.е. как ты видишь). Эт не твоя проблема, если чет не понравится и не трудно - перепилишь, если трудно - шли лесом под любым предлогом. Вроде - "это не оптимизировано". Кого я учу)) И да, я в работе перфекционист, но дерьмо видел))) Крч по практике - тебе надо накинуть такие вот брейкпоинты (которые приведены выше) на jQuery, все что изменить - названия классов и пиксели + накидать классов. Но наверн, твой заказчик говорил о position: sticky (и при минимальном скролле накидывай класс миниатюрности).

[gh0sty]

KononovD, Вот скрин посмотрел. box-shadow (тень снизу). И к шапке без верха "position: sticky; top: 0;". И вроде все должно работать.

[KononovD]

gh0sty, ну я пока сделал "как-нибудь, что б было": выезжающая строка сверху. jQ не люблю, пишу на нативном. + идея тянуть в реакт jq тянет на номинацию в World Stupidity Awards :DDD
Основная боль заключается в том, что бы сделать это плавно, с анимациями, что бы верхняя полоска свернулась до max-height:0, название сайта, возле логотипа - opacity:0, инпут поиска свернулся до max-width:0. это сделать просто, но вот как потом переместить красную кнопку поиска вправо и втиснуть пункты меню в оставшееся расстояние ПЛАВНО - я прям совсем не знаю.

есть вариант сделать это с абсолютным позиционированием, но это крайний случай.

может, ради такого используют канвас, не знаю) не умею в канвас

шли лесом под любым предлогом

клиент разбирается в вебе не хуже моего фуллстак руководителя :D

ну ладн, спасибо, успехов)