Плавающий верх сайта, меню, логотип, контакты, как менять стили при откреплении от верха?

Question

[Антон Вебсайтовский]

Всем привет.
Реализовал открепления верха сайта, чтоб плавало по сайту, контакты и меню, два блока.
Теперь встал вопрос, как сделать чтобы при откреплении от верха, стиль меню менялся, хочу по ужи сделать, чтоб не такое широкое было и логотип меньше сделать, я так понимаю такое только через js надо организовывать, чтобы типа при таком-то отступе сверху допустим 150px, применялись стили к блоку где логотип и где меню.

Вообщем кто понял меня, как такое реализовывают?

Я сделал стиль для логотипа чтобы он меньше становился. Осталось как-то применить к логотипу.

.logos img {
  height: 35px;
}

И стиль для блока где логотип и менюшка (данный стиль, уменьшает отступы синего блока), тем самым он становиться узким. Осталось его как-то применить.

.menus {
  padding: 10px 0 10px 0;
}

Для плавающих блоков я применил такой стиль, обернул блоки в div и прикрутил css

.plav {
  position: sticky;
  top: 0;
  z-index:9999;
}

Рабочий пример схемы тут:
https://jsfiddle.net/vlit/ag14ju8s/71/

Comments

[Сергей delphinpro]

ну и где там ваши стили? .logos .menus и что там ещё
Зато есть куча ненужного мусора, не относящегося к вопросу...

Не нужно всю страницу вываливать в фиддл.
Не нужно подключать в теле страницы внешние ресурсы (тегами link и script), для этого есть специальное место (в левой колонке).
Нужно пользоваться кнопочками Tidy (верхний правый угол в редакторе)

[Антон Вебсайтовский]

Сергей delphinpro, как обычно бывает, выкладываешь в филд, народ пишет, да чет не хватает этого или этого, я решил выложить то как у меня сделано, чтоб потом не возникло проблем ) пройденный этап.

Tidy - знаю, не всегда просто нажимаю.

Answer 1

[Сергей delphinpro]

Вот – простой и понятный пример. Без кучи мусора.
https://jsfiddle.net/DelphinPRO/dztLf9no/

Comments

[xeon2620v3]

что значит $ в js?

[Сергей delphinpro]

xeon2620v3, jquery подключен

[Антон Вебсайтовский]

Да пример прям очень простой, поставлю попробую, посмотрим как оно будет на мобиле и других браузерах.

[Антон Вебсайтовский]

css пишет что типа ошибки, а как-то по другому можно написать?
А это же scss ), я пока только css использую.

.header.sticky {
  padding: 1rem;

  .logo {
    font-size: 20px;

    span {
      width: 40px;
      height: 40px;
    }
  }
}

[Сергей delphinpro]

Антон Вебсайтовский,

.header.sticky {
  padding: 1rem;
}
.header.sticky .logo {
  font-size: 20px;
}
.header.sticky .logo span {
  width: 40px;
  height: 40px;
}

[Антон Вебсайтовский]

Сергей delphinpro, да уже сделал ) забыл удалить просто пост ) сначала не понял, потом понял что это scss )

Answer 2

[Дмитрий]

Тут все разжевали Можно сделать вывод, что требуется сторонняя библиотека, ибо все решения, имеют проблемы.
Эта библиотека делает то, что вам нужно.

Comments

[Антон Вебсайтовский]

Отлично, спасибо, щас буду осваивать данную информацию.

[Дмитрий]

Антон Вебсайтовский, https://codepen.io/alex922/pen/mdwBvNe

[Сергей delphinpro]

Дмитрий, вот это https://github.com/bigspotteddog/ScrollToFixed/blo... вместо трех строк на jquery?
Зачем?

[Дмитрий]

Сергей delphinpro, Нормальная, кроссбраузерная библиотека!

[imko]

Сергей delphinpro, как это зачем) сразу куча ТЕХНОЛОГИЙ включается, надо пару часов почитать доки, запаковать это в сборку, еще недельку потом эту сборку оптимизировать добавив пакетов для оптимизации, почитать у них доки, передернуть пару раз на структуру проекта и то как потом много можно будет потратить времени на отладку или изменения, на разворачивание проекта на другой машине. А если получится добиться уровня тормозов мобильной версии сайта ситилинка то это и отметить можно

[Сергей delphinpro]

Дмитрий,

Нормальная, кроссбраузерная библиотека!

...с кучей ненужного функционала =)
А так, да, норм.

[Дмитрий]

Сергей delphinpro, Скорее ВАМ ненужного функционала... Странно что использовав пару функций из jquery, вы не рассматривается его как "куча ненужного функционала"... Там ведь столько лишнего...
Почему на своем сайте плагины подключили? Модальное окно можно было одной строкой написать! )))
Непорядок! Исправляйтесь!

[Ankhena]

Дмитрий, JQ у ТС уже и так есть в проекте. Т.е. вопрос подключать его или нет не стоит.
И JQ этот вопрос решает в 1,5 строки.

[Дмитрий]

Ankhena, Наверное... Только смысл "орать" что библиотека лишняя, когда ты верстаешь сайты, с кучей сторонних библиотек... Ладно чужие, но свой... Прости господи JQuery еще и библиотеки не слиты в одно целое, наверное даже gulp не осилил... В общем страшные вещи!!!
И эти люди запрещают мне ковыряться в носу!!!

[Ankhena]

Дмитрий, ну вы что, не знаете поговорку "сапожник без сапог"?
Мои сайты тоже в убогом состоянии и не обновлялись лет 10, просто потому что в них нет нужды.

И дело не просто в сторонней библиотеке. А в том, что уже подключенная и так решает задачу. Без лишней сторонней явно будет лучше.

А к советам Сергея я бы относилась с большим трепетом, но никак не с негодованием.

[Дмитрий]

Ankhena, Видели мы уже таких советчиков.... Потом будет следующий вопрос "Почему у меня в safari под ipad меню 'прыгает'???" ))

UPD: *sticky меню 'прыгает'!

[Ankhena]

Дмитрий, старательно промолчу

[Антон Вебсайтовский]

Дмитрий, ага работает, спасибо.

[Антон Вебсайтовский]

Сергей delphinpro, предлагаешь не использовать jquery, но я не дорос до такого уровня, а так да я люблю оптимизацию, чтобы не грузить библиотеку всю, ибо с нее может быть пару функций использоваться на сайте.
По этому я тупо ставлю jquery, для различных скриптов.

[Антон Вебсайтовский]

Так данный скрипт что ниже, типа без проблем. Ну типа лучшее решение я так понимаю.
Ибо большая часть решений с проблемами.

Эта библиотека делает то, что вам нужно.
https://github.com/bigspotteddog/ScrollToFixed

Ну по сути вес ее 5кб. если сжат js, не так уж и много.

[Дмитрий]

Антон Вебсайтовский, Оптимизация - это хорошо, только без фанатизма! Как я уже сказал, у safari есть баг связанный со sticky, это то, что мне известно, может еще где проблемы имеются... Естественно этот баг в новой версии пофиксили! Что использовать, решать только вам!
Пробуйте делать вещи без JQuery, в противном случае, так и будете таскать это Г.

[Дмитрий]

Антон Вебсайтовский, Если вы еще и сборщиком все скрипты объедините, браузер вообще не заметит этого!

https://github.com/rgalus/sticky-js На ванильном JS, ничтожного размера.

[Сергей delphinpro]

Антон Вебсайтовский,

предлагаешь не использовать jquery,

ну вот откуда такие выводы?
Я даже свой пример показал с использованием jquery.

[Сергей delphinpro]

Ankhena,

А к советам Сергея я бы относилась с большим трепетом, но никак не с негодованием.

Спасибо )