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

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Helix 3 - sticky.js
« : 16.06.2016, 21:38:16 »
Всем доброго времени суток. Использую шаблон Helix3 с плавающем меню.
В шаблоне используется // Sticky Plugin v1.0.4 for jQuery
Спойлер
[свернуть]
Инициализация вот такая:
Код
//Sticky Menu
    $(document).ready(function(){
        $("body.sticky-header").find('#sp-header').sticky({topSpacing:0})
    });
Всё работает прекрасно, но хотелось бы изменить вид меню начального и меню при скролле. И добавить transition из 1-го дефолтного состояния к плавающему.
Куда копать? Я просто уже запутался... Нужно направить меня в правильном направлении. Заранее спасибо. Тестовый сайт
Спойлер
[свернуть]
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #1 : 16.06.2016, 21:48:31 »
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Вот довольно хорошие примеры переходов.
Хотя использую на 1 скрипт меньше, чем вы, а именно stickUp.min.js и
    <script type="text/javascript">
      jQuery(function($) {
        $(document).ready( function() {
          $('.navbar-wrapper').stickUp({});
        });
      });
    </script>
А дивом navbar-wrapper оборачиваете всё, что вам нужно (в вашем случае полоску меню), а ней в CSS ваш выбранный переход.

Но раз вы уже сделали плагином тем, то к нему выбранный переход (по ссылке есть как и есть демки)
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #2 : 16.06.2016, 22:03:38 »
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Вот довольно хорошие примеры переходов.
Хотя использую на 1 скрипт меньше, чем вы, а именно stickUp.min.js и
    <script type="text/javascript">
      jQuery(function($) {
        $(document).ready( function() {
          $('.navbar-wrapper').stickUp({});
        });
      });
    </script>
А дивом navbar-wrapper оборачиваете всё, что вам нужно (в вашем случае полоску меню), а ней в CSS ваш выбранный переход.

Но раз вы уже сделали плагином тем, то к нему выбранный переход (по ссылке есть как и есть демки)
Ваш пример stickup более подходящий для меня из-за "One Pager" anchor functionality. Сейчас буду пробовать вывести у себя в шаблоне.
Спасибо за пример, + добавил ;)
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #3 : 16.06.2016, 22:42:57 »
Спасибо, если нужен файл скрипта-могу прикрепить.
Ещё нужно на CSS обратить внимание: .isStuck{*******} и .navbar-wrapper {********}
Тут ваши стили обязательны.Например навбаром-wrapper контролировать отступ и ваши новые переходы, в изстик-лефт:0 и виз:100% и там же @media под моб.устройства.
« Последнее редактирование: 16.06.2016, 22:49:59 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #4 : 17.06.2016, 11:34:03 »
Вообщем пробовал добавить стили к своему плагину. Вышло изменить плавно только саму полосу меню а элементы в ней не могу изменить. Именно не могу добавить им line-height:45px при скроле. Просто не могу сообразить как в скрипт добавить стили CSS для классов logo,sp-megamenu-parent >li >a и для id=#offcanvas-toggler.
Не подскажете как это сделать?
Спойлер
[свернуть]
Вот сам скрипт
Спойлер
[свернуть]
Вот инициализация
Спойлер
[свернуть]
« Последнее редактирование: 17.06.2016, 11:39:23 от deminevgen »
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #5 : 17.06.2016, 11:55:18 »
Как в ваш скрипт не знаю, это его ставить надо, смотреть.
Как в мой-я вам написал выше, там всего 2 стиля (создал отдельную папку menu в корне, чтоб не путать, т.к. у меня там много касается для меню):

-закачиваете в menu stickUp.min.js;
-если хотите не путать CSS, создаёте файл там же /menu/navbarwrapper.css
index.php шаблона перед </body> (или что у вас управляет) добавляете:

Спойлер
[свернуть]

Выше там же в index.php вызываете <link rel="stylesheet" type="text/css" href="/menu/navbarwrapper.css" /> между <head> и </head>.
Можете стили внести в шаблон, как удобно.Также под себя менять пути.

Оборачиваете <div class="navbar-wrapper">***</div> то, что у вас будет залипать.
В файл navbarwrapper.css пишем:

Спойлер
[свернуть]

Стили уже под себя.
Обратите внимание:
.navbar-wrapper это исходный класс меню (дива) без скролла. В нём же (у меня просто не нужно) указываете top:***px;, т.е. на каком расстоянии от потолка висит ваш div. Или padding-top/margin-top.
.isStuck-это уже ваша залипашка.
Вот в неё добавляете ваши изменения, что происходит с полоской или её содержимым.
« Последнее редактирование: 17.06.2016, 12:08:52 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #6 : 17.06.2016, 12:09:03 »
а если сделать инициализацию вот так?
Код
 $(document).ready(function(){
        $("body.sticky-header").find('#sp-header').stickUp({})
    });
Делаю так для работы переключателя в настройках шаблона плавающего меню.

Такая инициализация вполне работает, и переключатель в настройках шаблона с ней тоже работает.
« Последнее редактирование: 17.06.2016, 12:18:10 от deminevgen »
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #7 : 17.06.2016, 12:14:06 »
Попробуйте, повторюсь, ставить не хочу и не силён я в скриптах.
Может кто дельное подскажет правильное в теме для вашего скрипта, раз упорно его юзаете, подождите.
Просто мой вариант 100% рабочий, ваш не знаю.
Да и ещё я применяю wow.js и animate.css, поэтому у меня иные эффекты появления, отложенности и т.д. на сайте, и соответственно и с объектами в "залипашке".

И мне кажется это не совсем верно .stickUp({topSpacing:0}), т.к. в стили выносится же класс .stickUp
Хотя могу и ошибаться.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #8 : 17.06.2016, 12:20:07 »
Попробуйте, повторюсь, ставить не хочу и не силён я в скриптах.
Может кто дельное подскажет правильное в теме для вашего скрипта, раз упорно его юзаете, подождите.
Просто мой вариант 100% рабочий, ваш не знаю.
Да и ещё я применяю wow.js и animate.css, поэтому у меня иные эффекты появления, отложенности и т.д. на сайте, и соответственно и с объектами в "залипашке".

И мне кажется это не совсем верно .stickUp({topSpacing:0}), т.к. в стили выносится же класс .stickUp
Хотя могу и ошибаться.
Поставил ваш скрипт, вроде всё работает, можете проверить карректно ли он работает?
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #9 : 17.06.2016, 12:23:21 »
Вроде да.Только канвас (боковое меню) теперь настройте синхронно в CSS z-indexы.
А то прячется под div оно.
/// В 1017 строку в темплейт.цсс добавьте z-index: 99999; чтобы так было:

.ltr.offcanvas .offcanvas-menu {
    right: 0;
    z-index: 99999;
}
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #10 : 17.06.2016, 12:27:47 »
Вроде да.Только канвас (боковое меню) теперь настройте синхронно в CSS z-indexы.
А то прячется под div оно.
С индексами разберемс. Вот теперь хочу изменить размер всего меню при скролинге ровно на половину.
Для isStuck прописал height: 45px !important;
line-height: 45px !important;
Но меняется опять же только полоска а элементы в ней остаются на месте(((
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #11 : 17.06.2016, 12:33:30 »
a.logo {
    height: 30px !important;
}
например так можно играться.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #12 : 17.06.2016, 12:37:06 »
a.logo {
    height: 30px !important;
}
например так можно играться.
Да)) только нашёл )) #sp-header.isStuck .logo {
  height: 45px;
  transition: 500ms;
}

и вот ещё
Код
#sp-header.isStuck .sp-megamenu-parent >li >a {
  height: 45px;
  line-height: 45px;
  transition: 500ms;
}
Ещё раз спасибо за помощь.!
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #13 : 17.06.2016, 12:40:33 »
Да.просто к диву объекта добавляете isStuck и делаете новый стиль в темплейте.цсс.
А в нём уже любые ваши фантазии для этого объекта при применении скролла и включении общего класса isStuck
Я же выше писал,isStuck-ваш класс для залипашки, соответственно и приставка к любому стилю для объектов в этом диве.

Спойлер
[свернуть]
« Последнее редактирование: 17.06.2016, 12:52:04 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #14 : 17.06.2016, 12:58:00 »
Да.просто к диву объекта добавляете isStuck и делаете новый стиль в темплейте.цсс.
А в нём уже любые ваши фантазии для этого объекта при применении скролла и включении общего класса isStuck
Я же выше писал,isStuck-ваш класс для залипашки, соответственно и приставка к любому стилю для объектов в этом диве.

Спойлер
[свернуть]
А как сделать эффект при обратном скролинге?
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #15 : 17.06.2016, 13:02:33 »
А как сделать эффект при обратном скролинге?
Так у вас при обратном скролле ведь встаёт в первоначальное положение, когда достигаете настроек навбар-wrapper с его стилями.
Или вы про что?
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #16 : 17.06.2016, 13:04:43 »
Так у вас при обратном скролле ведь встаёт в первоначальное положение, когда достигаете настроек навбар-wrapper с его стилями.
Или вы про что?
эффект animate.css при обратном скроле. Когда элемент прокрутил и начинаешь в обратном направлении крутить.
Почему то не работает((( CSS и js подключил, добавил <img class="wow zoomInUp" data-wow-delay="0.5s" data-wow-duration="2s" src="images/joomla_black.png" alt="">
<p class="wow zoomInUp" data-wow-delay="1.0s" data-wow-duration="3s">текст1</p> но без эффекта(
Почему то не хочет работать(
« Последнее редактирование: 17.06.2016, 13:13:23 от deminevgen »
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #17 : 17.06.2016, 13:11:42 »
Обратный скрипт нужен https://github.com/imakewebthings/waypoints/tree/master/src waypoint.js
В той теме я не указывал его, т.к. не спрашивали.

Подключение также, а вот применение немного отличается
Вот нашёл первое попавшееся в Google, вроде расписано как сделать, чтоб не сидеть вам не печатать в теме.
http://smartlanding.biz/css-animaciya-pri-skrolle-v-obe-storony.html

Только у них jquery.waypoints.js , это одно и тоже, просто так они видно назвали.
Они там на мастера ссылку дают, я вам сразу прямую выше дал на сам скрипт.
И они там подключают квери, у вас уже есть подключение в движке, смотрите конфликтов и двойных подключений не наделайте.
« Последнее редактирование: 17.06.2016, 13:16:04 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #18 : 17.06.2016, 13:17:34 »
Всё работает! инициализацию забыл)
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #19 : 17.06.2016, 13:19:00 »
а инициализацию сделали?вызов скрипта <script>new WOW().init();</script> ?
В той теме что я отвечал всё правильно и рабочее 100%, вы что-то неправильно подключаете.

/// ну пока писал, вы уже и сами нашли причину.ну и хорошо, что разобрались и с этим.
А теперь фантазия в руки)))
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #20 : 17.06.2016, 13:20:09 »
а инициализацию сделали?вызов скрипта <script>new WOW().init();</script> ?
Ну вроде бы всё! Пошёл играться с меню) буду красоту наводить.
Ещё раз благодарю.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #21 : 17.06.2016, 13:21:11 »
Ну вроде бы всё! Пошёл играться с меню) буду красоту наводить.
Ещё раз благодарю.
Удачи, если что-обращайтесь.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

deminevgen

  • Захожу иногда
  • 115
  • 2 / 0
Re: Helix 3 - sticky.js
« Ответ #22 : 17.06.2016, 15:43:45 »
Удачи, если что-обращайтесь.
Вот решил обратиться)
Не подскажете как добавить анимацию прилипающему меню.
К дефолтному добавил а вот к прилепающему не могу понять как...
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Helix 3 - sticky.js
« Ответ #23 : 17.06.2016, 15:55:15 »
isStuck-ваш класс для залипашки
там есть объекты со своими классами, вот к ним.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

OffCanvas меню Helix Ultimate добавить текст к иконке

Автор Andre100

Ответов: 2
Просмотров: 2153
Последний ответ 20.03.2023, 12:42:49
от Andre100
Helix 3 старается горизонтально размеченные картинки переставить вертикально

Автор olderman

Ответов: 3
Просмотров: 768
Последний ответ 30.10.2022, 08:59:06
от marksetter
Где настраивается и как убрать Sidebar в Helix Ultimate?

Автор varella

Ответов: 5
Просмотров: 768
Последний ответ 20.09.2022, 23:12:13
от varella
Helix ultimate 2 вопрос про меню и хедар

Автор Serganius

Ответов: 3
Просмотров: 731
Последний ответ 21.12.2021, 23:02:51
от Alex_gs
Генератор в Helix Ultimate 2

Автор Andrew59

Ответов: 2
Просмотров: 1142
Последний ответ 11.12.2021, 17:27:28
от fonPux