Форум русской поддержки Joomla!® CMS
07.12.2016, 22:25:00 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как сделать такой эффект?

 (Прочитано 282 раз)
0 Пользователей и 1 Гость смотрят эту тему.
maska
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 44



« : 10.09.2015, 14:55:51 »

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

Пример: http://ua-award.org/
Записан
Grigory S.
Завсегдатай
*****

Репутация: +68/-0
Offline Offline

Пол: Мужской
Сообщений: 685


(с)


« Ответ #1 : 10.09.2015, 15:13:59 »

Меню делаем фиксированным

Код
.navbar{
  position: fixed;
}
.collapse{
  // оформление
}
 

и при скролле добавляем класс с нужным оформлением:

Код
jQuery(document).scroll(function(){
       jQuery(this).scrollTop() > 0 ? jQuery('.navbar').addClass('collapse') : jQuery('.navbar').removeClass('collapse');
});    
 
« Последнее редактирование: 10.09.2015, 15:39:19 от kamaz6141 » Записан
darkghost
Практически профи
*******

Репутация: +75/-0
Offline Offline

Сообщений: 1811



« Ответ #2 : 10.09.2015, 15:45:59 »

Как говорили выше, для размещения блока меню поверх остальных элементов страницы, необходимо установить position: fixed; и задать поочередность слоя — z-index ---->>>
Показать текстовый блок
Записан
maska
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 44



« Ответ #3 : 10.09.2015, 15:53:05 »

Огромное огромное спасибо! В коде пока плохо разбираюсь, сам бы не сделал. Еще раз спасибо!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet