Комментарии (6)

  • Решение
    Александр Тирон 11 декабря 2015 18:48 #

    1. В файле "theme.script.html" (сайт-дизайн-шаблоны) в самый конец файла вставьте код:

    <script type="text/javascript">
    $(window).scroll(function() { 
        if ( $(this).scrollTop()>=250 ) {
            $(".tree-wrapper").addClass( "fixed" );
        }else if ( $(this).scrollTop()<240 ) {
            $(".tree-wrapper").removeClass( "fixed" );
        }
    });
    </script>

    2. в блоке пользовательских стилей пропишите правило:

    @media only screen and (min-width: 993px) {
    .tree-wrapper.fixed {
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        z-index:1001;
    }
    }


    1
  • Александр Тирон 11 декабря 2015 18:52 #
    Если меню фиксируется вверху, то у блока справа при передвижении вниз закрываются верхние надписи, вот его и нужно приспустить когда он плавает:


    в блоке пользовательских стилей пропишите правило:

    @media only screen and (min-width: 993px) {
    .product-sidebar.fly {    
        margin-top: 60px;
    }
    }
    1
  • Александр Тирон 11 декабря 2015 18:55 #

    Так же Вы можете изменить высоту и цвет фона плавающего меню:



    в блоке пользовательских стилей пропишите правило:

    .tree-wrapper.fixed {
        height: 31px; /* высота меню */ 
        line-height: 30px; /* высота линий и активного элемента */     
        background-color: #F7FFAF; /* цвет фона */ 
    }


    1
  • Николай 31 августа 2016 21:18 #

    Всё выше описанное применил на своём сайте. все работает. Спасибо!

    а как сделать чтобы при переходе на товар, было видно и заголовок h1?

    как это было до установки плавающего меню, при переходе на страницу товара.

    заранее спасибо.

    1
    • Александр Тирон Александр Тирон 5 сентября 2016 10:30 #

      В файле product.html строку:

      $('html,body').animate({ scrollTop: $('#productheader').offset().top }, 800);

      замените строкой:

      $('html,body').animate({ scrollTop: $('#productheader').offset().top - 60 }, 800);
      1
  • Игорь * 29 сентября 2017 15:14 #

    Здравствуйте, возникла проблема с мобильной версткой после добавления кода стали наезжать иконки на категории.

    Заменили строку:

    $(window).scroll(function() {if ( MatchMedia("only screen and (min-width: 993px)") ) {if ( $(this).scrollTop()>=250 ) {$(".tree-wrapper").addClass( "fixed" );}else if ( $(this).scrollTop()<240 ) {$(".tree-wrapper").removeClass( "fixed" );}}});

    Выдает ошибку теперь, помогите исправить пожалуйста.

    1
  • Игорь * 30 сентября 2017 10:07 #

    Решение:

    <script type="text/javascript">

    $(window).scroll(function() {

    if ( MatchMedia("only screen and (min-width: 993px)") ) {

    if ( $(this).scrollTop()>=250 ) {

    $(".tree-wrapper").addClass( "fixed" );

    }else if ( $(this).scrollTop()<240 ) {

    $(".tree-wrapper").removeClass( "fixed" );

    }

    }

    });

    </script>

    1

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите

Контакты

Дорогие друзья!

К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.

Пожалуйста, обновите браузер, скачав его по ссылкам ниже, или обратитесь к системному администратору, обслуживающему Ваш компьютер.

Internet Explorer

от Microsoft

Chrome

от Google

Safari

от Apple

Opera

от Opera Software

Firefox

от Mozilla

Вверх