Плавное появление блока с меню при скролле

Общие вопросы по системе юкоз, вопросы по ucoz, вопросы без определенной темы

Плавное появление блока с меню при скролле

» » Сообщение:

Здравствуйте!

Подскажите, пожалуйста, как сделать плавное появление панели с меню, после пролистывания страницы вниз?
Пробовал через свойство transition - не получалось...

Появление: через прозрачность или выпадание блока сверху.

Скрипт проверяет расстояние от верхнего края, если >300, то добавляет класс fixed, который фиксирует блок с меню

script Код: Выделить всё Развернуть
jQuery(function($) {
           $(window).scroll(function(){
               if($(this).scrollTop()>300){
                   $('#catmenu').addClass('fixed');
               }
               else if ($(this).scrollTop()<300){
                   $('#catmenu').removeClass('fixed');
               }
           });
       });

Сайт

Последний раз редактировалось Fearfire 10 мар 2017, 21:09, всего редактировалось 1 раз.
меню, блок, div, скролл, css, javascript, появление

Re: Плавное появление блока с меню при скролле

Admin » » Сообщение:

Fearfire писал(а) › 08 мар 2017, 13:16:Пробовал через свойство transition - не получалось...

Проще всего скриптом - в момент появления установить прозрачность 0, добавить класс, и плавно увеличить до 1.
Типа:

Код: Выделить всё Развернуть
$('#catmenu').fadeOut(0).addClass('fixed').fadeIn(400);

Или то же самое - стилями.




Re: Плавное появление блока с меню при скролле

Fearfire » » Сообщение:

Admin писал(а) › 08 мар 2017, 16:23:Добавьте проверку на наличие класса, точнее, его отсутствие.
script Код: Выделить всё Развернуть
jQuery(function($) {
           $(window).scroll(function(){
               if($(this).scrollTop()>300){
                      if ( $("#catmenu").hasClass("fixed") ) {}
                      else {
                   $('#catmenu').fadeOut(0).addClass('fixed').fadeIn(400);
                      }
               }
               else if ($(this).scrollTop()<300){
                   $('#catmenu').removeClass('fixed');
               }
           });
       });

Я не силён в JavaScript, но что-то состряпал :)


Re: Плавное появление блока с меню при скролле

Admin » » Сообщение:

Fearfire писал(а) › 09 мар 2017, 18:45:Я не силён в JavaScript, но что-то состряпал

Так будет чуть лаконичнее:

Код: Выделить всё Развернуть
               if($(this).scrollTop()>300 && !$('#catmenu').hasClass('fixed')){
                   $('#catmenu').fadeOut(0).addClass('fixed').fadeIn(400);
               }




Похожие темыКомментарии ПросмотрыПоследнее сообщение
0304Меню, хлебные крошки - Кнопки Добав...
Сообщение от: Admin
01066Меню Пуск для Windows 8. Как вернут...
Сообщение от: Admin
2746Re: Боковые элементы для горизонтал...
Сообщение от: Мачеча Юрий
0445Чистим контекстные меню
Сообщение от: Admin
9684Re: Настройка меню
Сообщение от: Kzander