Фиксация меню вверху страницы при прокрутке вниз

  • 18 Ответов
  • 16850 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

schel4ok

видел на многих сайтах прикольную вещь.
Есть шапка с картинкой.
Под шапкой горизонтальное меню.

Когда юзер загружает сайт на большом экране, он видит эту картинку в шапке и меню ну и может быть еще немного текста снизу.
А когда начинает прокручивать страницу вниз, то как только меню достигает верхнего края окна браузера, то оно к нему прилипает и юзер больше не видит шапку.

У меня такая штука получалась только если горизонтальное меню в самом верху и над ним вообще ничего нету. В этом случае свойство static: fixed работает без проблем.

А вот если над меню что-то есть, как тут http://joomla.stilnyeokna.ru/
То такой способ не работает.

Кто-то может помочь?

*

alex38ann

  • ***
  • 192
  • [+]7 / [-]0
  • jo-J3-e-Jl-u-P
It's my life..

*

schel4ok

Попробовал так сделать, но почему-то не получается.
Пишет ошибку event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Пробовал гуглить. Везде пишут, что эта ошибка не должна мешать работе. Однако у меня не пашет.
http://joomla.stilnyeokna.ru/

*

alex38ann

  • ***
  • 192
  • [+]7 / [-]0
  • jo-J3-e-Jl-u-P
работает ведь?! по крайней мере по вашей ссылке у меня меню остается в верху с отступом около 150px

воспользуйтесь гуглом. там много вариантов:
Фиксируем блок в процессе вертикальной прокрутки (css, jquery)
Фиксированный плавающий div
« Последнее редактирование: 04.04.2014, 15:56:37 от alex38ann »
It's my life..

*

Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

schel4ok

работает ведь?! по крайней мере по вашей ссылке у меня меню остается в верху с отступом около 150px

так там работает тупо position: fixed

а при прокрутке свойство top не меняется на ноль

*

Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
Смысл работы как раз и есть в замене на position:fixed и обратно, при определённых условиях.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

schel4ok

уж это-то я понял
но он не меняется скриптами, а всегда равен fixed

*

schel4ok

короче я все понял.
помог анализ скрипта, предложенного здесь http://serg-smirnoff.com/2014/01/03/post_9168.htm

но он в этом виде не работает

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


*

schel4ok

код надо брать прямо из работающего примера


*

sergoguga

  • ******
  • 954
  • [+]70 / [-]8
  • www.mpbox.ru
>>> Верстка 100 евро - ждешь новый курс? Пиши!
>>> Создание моб. приложений по ГОСТу)))! Личка работает!
>>> Микроразметка по стандартам - цены адекват! Пиши, не боись!
>>> Личный кабинет на ZOO - уже сделан! Пиши в личку, не стесняйся!

А как сделать два плавающих блока слева и справа?

*

AlekVolsk

Точно так же, как и один, по той же самой схеме, что и меню в примерах выше.

Точно так же, как и один, по той же самой схеме, что и меню в примерах выше.
Ясно.

На компе заработало, а вот на планшетах объявление идёт по верх текста статей.
Есть настройка, что бы эта функция на планшетах не работала и на разрешении 800 на 600?

*

Сержo

« Последнее редактирование: 29.11.2014, 13:14:34 от Сержo »

*

Сержo

задублировал  ;D

Кто работает с t3-frameworks вот тут все написанно

http://www.t3-framework.org/documentation/menu-system.html#sticky-menu

*

Eholov

Мне этот вариант понравился http://www.xiper.net/collect/js-plugins/position-and-size/fixedbox.html без подключения новых jQuery к сайту. Сайт на Joomla 3 Реализовал в этом калькуляторе расчета цены потолков http://acos.com.ua/kalkulyator
« Последнее редактирование: 21.10.2015, 18:10:35 от Eholov »