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

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

Helix 3 - sticky.js

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

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

Сообщений: 117



« : 16.06.2016, 22: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
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #1 : 16.06.2016, 22: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 ваш выбранный переход.

Но раз вы уже сделали плагином тем, то к нему выбранный переход (по ссылке есть как и есть демки)
Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #2 : 16.06.2016, 23: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. Сейчас буду пробовать вывести у себя в шаблоне.
Спасибо за пример, + добавил Wink
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #3 : 16.06.2016, 23:42:57 »

Спасибо, если нужен файл скрипта-могу прикрепить.
Ещё нужно на CSS обратить внимание: .isStuck{*******} и .navbar-wrapper {********}
Тут ваши стили обязательны.Например навбаром-wrapper контролировать отступ и ваши новые переходы, в изстик-лефт:0 и виз:100% и там же @media под моб.устройства.

* stickUp.min.zip (1.02 Кб - загружено 11 раз.)
« Последнее редактирование: 16.06.2016, 23:49:59 от vipiusss » Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #4 : 17.06.2016, 12:34:03 »

Вообщем пробовал добавить стили к своему плагину. Вышло изменить плавно только саму полосу меню а элементы в ней не могу изменить. Именно не могу добавить им line-height:45px при скроле. Просто не могу сообразить как в скрипт добавить стили CSS для классов logo,sp-megamenu-parent >li >a и для id=#offcanvas-toggler.
Не подскажете как это сделать?
Показать текстовый блок
Вот сам скрипт
Показать текстовый блок
Вот инициализация
Показать текстовый блок
« Последнее редактирование: 17.06.2016, 12:39:23 от deminevgen » Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #5 : 17.06.2016, 12: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, 13:08:52 от vipiusss » Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #6 : 17.06.2016, 13:09:03 »

а если сделать инициализацию вот так?
Код:
$(document).ready(function(){
        $("body.sticky-header").find('#sp-header').stickUp({})
    });
Делаю так для работы переключателя в настройках шаблона плавающего меню.

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

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #7 : 17.06.2016, 13:14:06 »

Попробуйте, повторюсь, ставить не хочу и не силён я в скриптах.
Может кто дельное подскажет правильное в теме для вашего скрипта, раз упорно его юзаете, подождите.
Просто мой вариант 100% рабочий, ваш не знаю.
Да и ещё я применяю wow.js и animate.css, поэтому у меня иные эффекты появления, отложенности и т.д. на сайте, и соответственно и с объектами в "залипашке".

И мне кажется это не совсем верно .stickUp({topSpacing:0}), т.к. в стили выносится же класс .stickUp
Хотя могу и ошибаться.
Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #8 : 17.06.2016, 13:20:07 »

Попробуйте, повторюсь, ставить не хочу и не силён я в скриптах.
Может кто дельное подскажет правильное в теме для вашего скрипта, раз упорно его юзаете, подождите.
Просто мой вариант 100% рабочий, ваш не знаю.
Да и ещё я применяю wow.js и animate.css, поэтому у меня иные эффекты появления, отложенности и т.д. на сайте, и соответственно и с объектами в "залипашке".

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

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #9 : 17.06.2016, 13:23:21 »

Вроде да.Только канвас (боковое меню) теперь настройте синхронно в CSS z-indexы.
А то прячется под div оно.
/// В 1017 строку в темплейт.цсс добавьте z-index: 99999; чтобы так было:

.ltr.offcanvas .offcanvas-menu {
    right: 0;
    z-index: 99999;
}
Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #10 : 17.06.2016, 13:27:47 »

Вроде да.Только канвас (боковое меню) теперь настройте синхронно в CSS z-indexы.
А то прячется под div оно.
С индексами разберемс. Вот теперь хочу изменить размер всего меню при скролинге ровно на половину.
Для isStuck прописал height: 45px !important;
line-height: 45px !important;
Но меняется опять же только полоска а элементы в ней остаются на месте(((
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #11 : 17.06.2016, 13:33:30 »

a.logo {
    height: 30px !important;
}
например так можно играться.
Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #12 : 17.06.2016, 13: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
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #13 : 17.06.2016, 13:40:33 »

Да.просто к диву объекта добавляете isStuck и делаете новый стиль в темплейте.цсс.
А в нём уже любые ваши фантазии для этого объекта при применении скролла и включении общего класса isStuck
Я же выше писал,isStuck-ваш класс для залипашки, соответственно и приставка к любому стилю для объектов в этом диве.

Показать текстовый блок
« Последнее редактирование: 17.06.2016, 13:52:04 от vipiusss » Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #14 : 17.06.2016, 13:58:00 »

Да.просто к диву объекта добавляете isStuck и делаете новый стиль в темплейте.цсс.
А в нём уже любые ваши фантазии для этого объекта при применении скролла и включении общего класса isStuck
Я же выше писал,isStuck-ваш класс для залипашки, соответственно и приставка к любому стилю для объектов в этом диве.

Показать текстовый блок
А как сделать эффект при обратном скролинге?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #15 : 17.06.2016, 14:02:33 »

А как сделать эффект при обратном скролинге?
Так у вас при обратном скролле ведь встаёт в первоначальное положение, когда достигаете настроек навбар-wrapper с его стилями.
Или вы про что?
Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #16 : 17.06.2016, 14: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, 14:13:23 от deminevgen » Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #17 : 17.06.2016, 14: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, 14:16:04 от vipiusss » Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #18 : 17.06.2016, 14:17:34 »

Всё работает! инициализацию забыл)
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #19 : 17.06.2016, 14:19:00 »

а инициализацию сделали?вызов скрипта <script>new WOW().init();</script> ?
В той теме что я отвечал всё правильно и рабочее 100%, вы что-то неправильно подключаете.

/// ну пока писал, вы уже и сами нашли причину.ну и хорошо, что разобрались и с этим.
А теперь фантазия в руки)))
Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #20 : 17.06.2016, 14:20:09 »

а инициализацию сделали?вызов скрипта <script>new WOW().init();</script> ?
Ну вроде бы всё! Пошёл играться с меню) буду красоту наводить.
Ещё раз благодарю.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #21 : 17.06.2016, 14:21:11 »

Ну вроде бы всё! Пошёл играться с меню) буду красоту наводить.
Ещё раз благодарю.
Удачи, если что-обращайтесь.
Записан
deminevgen
Осваиваюсь на форуме
***

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

Сообщений: 117



« Ответ #22 : 17.06.2016, 16:43:45 »

Удачи, если что-обращайтесь.
Вот решил обратиться)
Не подскажете как добавить анимацию прилипающему меню.
К дефолтному добавил а вот к прилепающему не могу понять как...
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

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


Skype: renor_


« Ответ #23 : 17.06.2016, 16:55:15 »

isStuck-ваш класс для залипашки
там есть объекты со своими классами, вот к ним.
Записан
Страниц: [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