Helix 3 - sticky.js

  • 23 Ответов
  • 1066 Просмотров

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

*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Helix 3 - sticky.js
« : 16.06.2016, 23: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

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Helix 3 - sticky.js
« Ответ #1 : 16.06.2016, 23: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

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: Helix 3 - sticky.js
« Ответ #2 : 17.06.2016, 00: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

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

*

deminevgen

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

*

vipiusss

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Helix 3 - sticky.js
« Ответ #5 : 17.06.2016, 13: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, 14:08:52 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

deminevgen

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

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

*

vipiusss

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

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

*

deminevgen

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

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

*

vipiusss

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Helix 3 - sticky.js
« Ответ #9 : 17.06.2016, 14:23:21 »
Вроде да.Только канвас (боковое меню) теперь настройте синхронно в CSS z-indexы.
А то прячется под div оно.
/// В 1017 строку в темплейт.цсс добавьте z-index: 99999; чтобы так было:

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

*

deminevgen

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

*

vipiusss

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

*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: Helix 3 - sticky.js
« Ответ #12 : 17.06.2016, 14: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

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Helix 3 - sticky.js
« Ответ #13 : 17.06.2016, 14:40:33 »
Да.просто к диву объекта добавляете isStuck и делаете новый стиль в темплейте.цсс.
А в нём уже любые ваши фантазии для этого объекта при применении скролла и включении общего класса isStuck
Я же выше писал,isStuck-ваш класс для залипашки, соответственно и приставка к любому стилю для объектов в этом диве.

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

*

deminevgen

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

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

*

vipiusss

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

*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: Helix 3 - sticky.js
« Ответ #16 : 17.06.2016, 15: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, 15:13:23 от deminevgen »

*

vipiusss

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Helix 3 - sticky.js
« Ответ #17 : 17.06.2016, 15: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, 15:16:04 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

deminevgen

  • Осваиваюсь на форуме
  • ***
  • 117
  • 2
Re: Helix 3 - sticky.js
« Ответ #18 : 17.06.2016, 15:17:34 »
Всё работает! инициализацию забыл)

*

vipiusss

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Helix 3 - sticky.js
« Ответ #19 : 17.06.2016, 15:19:00 »
а инициализацию сделали?вызов скрипта <script>new WOW().init();</script> ?
В той теме что я отвечал всё правильно и рабочее 100%, вы что-то неправильно подключаете.

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

*

deminevgen

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

*

vipiusss

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

*

deminevgen

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

*

vipiusss

  • Профи
  • ********
  • 5510
  • 318
  • JoomlaNet
Re: Helix 3 - sticky.js
« Ответ #23 : 17.06.2016, 17:55:15 »
isStuck-ваш класс для залипашки
там есть объекты со своими классами, вот к ним.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями