1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Зафиксировать навигацию

Тема в разделе "Модификации шаблонов", создана пользователем Александр, 4 сен 2013.

Загрузка
  1. Александр

    Александр Местный

    Регистрация:
    06.11.10
    Сообщения:
    479
    Симпатии:
    188
    Версия XF:
    1.4.3
    На сайте Digitalpoint есть такая интересная ерунда, что ссылки (навигация) всегда зафиксированы, даже когда прокручиваешь до конца страницы. Это какое-то дополнение? Или возможно кто-то подскажет как реализовать. Благодарю.
     

    Вложения:

    • 1.PNG
      1.PNG
      Размер файла:
      74,5 КБ
      Просмотров:
      372
    Lex нравится это.
  2. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    1. Попробуйте создать шаблон float_navigation с содержимым:
      Код:
      <script type="text/javascript">
      $(function() {
           $(window).scroll(function(){
               ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
                   $('#header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight'}px','z-index':'60'}):
                   $('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
           });
           $('#header').hover(
               function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
               function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'0.5'},400);}
           );
      });
      </script>
    2. В шаблоне page_container_js_body в самом низу добавить:
      Код:
      <xen:include template="float_navigation" />
     
    SpiritFlame, Raindrop, Alex Gludo и ещё 1-му нравится это.
  3. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Вы сообщите хоть, работает или совсем не то :) Я на оф. сайте нашёл просто. Там ни примера, ни скриншота :(
     
  4. sanmitsu

    sanmitsu Местный

    Регистрация:
    09.02.13
    Сообщения:
    50
    Симпатии:
    15
    Версия XF:
    1.1.3
    Работает, но фиксируется только верхнее подменю
     
  5. Lex

    Lex Dura Lex

    Регистрация:
    27.11.10
    Сообщения:
    802
    Симпатии:
    152
    Версия XF:
    1.5.1
    Кстати на этом же сайте понравилось решение с верхней строкой с социальными кнопками, может кто подскажет как сделать и такое?

    Online Internet Marketing & Search Engine Optimization Forum.png
    --- добавлено : 5 сен 2013 в 11:39 ---
    Там еще вроде и из твиттера выводятся в режиме онлайн сообщения.
     
    Последнее редактирование модератором: 13 сен 2013
  6. sanmitsu

    sanmitsu Местный

    Регистрация:
    09.02.13
    Сообщения:
    50
    Симпатии:
    15
    Версия XF:
    1.1.3
    Как правильно записать выражение без переменной @headerTabHeight ?
    Код:
    $('#header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight'}px','z-index':'60'}):
    А то в JavaScript полный 0
     
  7. Kolya groza morey

    Kolya groza morey Местный

    Регистрация:
    14.06.13
    Сообщения:
    321
    Симпатии:
    107
    Версия XF:
    1.5.9
    Использовать для класса position: fixed
     
  8. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Digitalpoint имеет множество самописных аддонов. Можете погуглить digitalpoint xenforo
    Там админ на xenforo.com выкладывал перечень самописных плагинов в виде скриншота.
     
  9. Mirovinger

    Mirovinger Местный

    Регистрация:
    17.05.12
    Сообщения:
    252
    Симпатии:
    246
    Версия XF:
    1.1.2
    Попробуйте заменить на это:
    Код:
    $('#header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight - 24'}px','z-index':'60'}):
     
    SpiritFlame, vovik1646, Raindrop и ещё 1-му нравится это.
  10. sanmitsu

    sanmitsu Местный

    Регистрация:
    09.02.13
    Сообщения:
    50
    Симпатии:
    15
    Версия XF:
    1.1.3
    Это понятно,но меня интересует как вообще убрать переменную из строчки (просто не нужна она там в моём случае.
     
  11. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    именно без @headerTabHeight?
    Пробовали так
    Код:
    $('#header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight'}px','z-index':'60'}):
    ?

    Сейчас создам тестовый шаблон, чтобы помочь.
     
  12. Mirovinger

    Mirovinger Местный

    Регистрация:
    17.05.12
    Сообщения:
    252
    Симпатии:
    246
    Версия XF:
    1.1.2
    Будет вся шапка плавающей.
     
  13. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    А, даже так :)
    Сейчас у себя потестирую, если найду решение - выложу.
    Финальная версия (05.09.2013 - 17:51)
    Код:
    <script type="text/javascript">
    $(function() {
         $(window).scroll(function(){
             ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 1.1)'}) ?
                 $('#header').css({'position':'fixed','top':'-51px','z-index':'100','-webkit-box-shadow':'white 0px 20px 20px','-moz-box-shadow':'white 0px 20px 20px','-khtml-box-shadow':'white 0px 20px 20px','box-shadow':'white 0px 20px 20px'}):
                 $('#header').css({'position':'absolute','top':'0px','z-index':'','-webkit-box-shadow':'','-moz-box-shadow':'','-khtml-box-shadow':'','box-shadow':''});
         });
    });
    </script>
    Хотел вместо style сделать class. Но понятия не имею как это осуществить.
    .addClass вместо .css рушит этот скрипт :(
     
    Последнее редактирование: 5 сен 2013
    sanmitsu и Mirovinger нравится это.
  14. Александр

    Александр Местный

    Регистрация:
    06.11.10
    Сообщения:
    479
    Симпатии:
    188
    Версия XF:
    1.4.3
    ютуб тоже решил панельку зафиксировать
     
  15. Александр

    Александр Местный

    Регистрация:
    06.11.10
    Сообщения:
    479
    Симпатии:
    188
    Версия XF:
    1.4.3
    Также стоит в шаблоне footer подправить одну строчку:
    Код:
    <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
    на
    Код:
    <li><a href="{$requestPaths.requestUri}#content" class="topLink">{xen:phrase go_to_top}</a></li>
    иначе кнопка вверх работать не будет, та что внизу
     
    Raindrop, adder и Mirovinger нравится это.
  16. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    @Александр Я бы заменил
    Код:
    <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
    на
    Код:
    <li><a href="{$requestPaths.requestUri}#headerProxy" class="topLink">{xen:phrase go_to_top}</a></li>
    Так лучше, моё мнение.
     
    SpiritFlame, Mirovinger и Александр нравится это.
  17. vovik1646

    vovik1646 Пользователь

    Регистрация:
    15.12.12
    Сообщения:
    88
    Симпатии:
    12
    Версия XF:
    1.2.4
    Версия первая мне больше подошла. Но вот чуть чуть ее ниже бы спустить.
    --- добавлено : 28 ноя 2013 в 20:00 ---
    Всем спасибо вопрос снят постом №9
     
    Последнее редактирование модератором: 6 дек 2013
  18. Metamorphosis

    Metamorphosis Активный пользователь

    Регистрация:
    11.02.14
    Сообщения:
    19
    Симпатии:
    7
    Версия XF:
    1.2.5
    Народ, а что за прозрачность отвечает? Как ее уменьшить?
     
  19. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    opacity отвечает за прозрачность.
     
    Metamorphosis нравится это.
  20. Metamorphosis

    Metamorphosis Активный пользователь

    Регистрация:
    11.02.14
    Сообщения:
    19
    Симпатии:
    7
    Версия XF:
    1.2.5
    Код:
    'opacity':'1'
    Нужно допустим 70% прозрачности, как реализовать?
     

Поделиться этой страницей