Скрипты для uKit 02.09.2017 7 609
Фиксированный логотип

Фиксированный логотип

Логотип должен прежде всего хорошо запоминаться покупателю. А как известно, лучший способ запоминания чего-либо — повторение.

Но как это сделать, не прибегая к размещению логотипа всюду и везде в ущерб гармоничному дизайну страницы? С помощью нашего скрипта логотип можно разместить прямо в фиксированном меню на самом верху страницы. При пролистывании страницы меню будет всё время оставаться наверху вместе с логотипом. Таким образом он не только впишется в дизайн сайта, но и всегда будет перед глазами посетителя страницы, что несомненно закрепит ваше изображение в его памяти. Скрипт будет полезен любому владельцу сайта, который намерен продавать какую-либо продукцию или предоставлять услуги под собственным брендом. Логотип в закреплённом меню сайта выглядит органично и удобно, не слишком сильно бросается в глаза и вместе с тем никогда не пропадает из поля зрения посетителя. Настоятельно рекомендуем воспользоваться в первую очередь именно этим скриптом.

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код
<script>
require(['jquery'], function($){
    var status_name = 0; // Достаточно ли место для текста лого (1 - нет)
    // меню
    var fix_logo = $('header .logo-head, header .header-content-left, header .header-content-center-sitename, header .header-content-icon, header .title-box'); // логотип (img и текст)
    if(fix_logo.length > 1){
        fix_logo.each(function(){
            fix_logo = $(this);
        });
    }
    if(fix_logo.length == 0) fix_logo = $('header [id^=ul-id-icon-]').parents('[class*="col"]');
    var fix_top = fix_logo.offset().top, // расстояние до потолка
        fix_rel_menu = $('.ul-w-mainmenu:eq(0)').parent(), // меню с шириной
        fix_logoH = fix_logo.find('img').innerHeight(), // высота картинки
        fix_slogan_display = fix_logo.children('*:eq(1)').css('display'),
        fix_vertical_menu = $('.vertical-menu'), // Вертикальное меню
        fix_sitename = $('header #ul-id-header-sitename'), // Текст лого
        fix_logo_ml = 0;
        
    // Ловим
    $(document).on('scroll', function(){
        fixiki();
        setTimeout(function(){fixiki()}, 1000);
    });
    
    // фиксируем
    function fixiki(){
        $('.ul-menu-fixed-container').css({
            'height': '73px'
        });
        var fix_menu = $('.ul-menu-fixed'), // фикс меню
            fix_menuH = fix_menu.innerHeight(); // высота меню
            
        fix_rel_menu = $('.ul-w-mainmenu:eq(0)').parent(); // меню с шириной
        
        // Если есть фикс меню
        if(fix_menu.length > 0){
            // Пусть ходит с меню
            fix_logo.css({
                'top': '0',
                'position': 'fixed',
                'z-index': '999',
                'width': 'auto',
                'margin-top': '0',
                'height': 'auto'
            });
            
            // Блок картинки
            $('header [id^="ul-id-icon-"]').css({
                'height': ''+fix_menuH+'px',
                'position': 'relative'
            });
            if($('header [id^="ul-id-icon-"] span').length > 0){
                $('header [id^="ul-id-icon-"] span').css({
                    'top': '50%',
                    'position': 'relative',
                    'margin-top': '-'+($('header [id^="ul-id-icon-"] span').innerHeight()/2)+'px',
                });
                $('header [id^="ul-id-icon-"]').attr('style', ''+$('header [id^="ul-id-icon-"]').attr('style')+'padding:0!important;');
            }
            
            // Картинка
            fix_logo.find('img').parent('a').css({
                'height': '100%',
                'max-height': ''+fix_menuH+'px'
            });
            fix_logo.find('img').css({
                'height': '100%',
                'max-height': ''+fix_menuH+'px'
            });
            
            // Если меню вертикальное
            if(fix_vertical_menu.length > 0){
                fix_sitename.css({
                    'height': ''+fix_menuH+'px'
                });
                if(fix_logo_ml == 0) fix_logo_ml = fix_logo.innerWidth()/2;
                fix_logo.css({
                    'left': '50%',
                    'margin-left': '-'+fix_logo_ml+'px'
                });
            }else{
                // Определение места для лого
                if(fix_rel_menu.offset().left < fix_logo.innerWidth()){
                    status_name = 1;
                    fix_logo.children('*:eq(1)').hide();
                    $('header [id^="ul-id-icon-"]').parent().children().hide();
                    $('header [id^="ul-id-icon-"]').show();
                    // Измерим ширину кнопок меню, если есть место, то добавим лого
                    var width = 0;
                    fix_rel_menu.find('.ul-w-mainmenu-item').each(function(){
                        width = width+$(this).innerWidth();
                    });
                    if((width+fix_logo.innerWidth()) < $(window).width()){
                        fix_logo.css('left', '0');
                        fix_rel_menu.find('.ul-w-mainmenu-item:eq(0)').attr('style', 'padding-left:'+fix_logo.innerWidth()+'px!important');
                    }else{
                        ishod();
                    }
                }else{
                    fix_logo.css({
                        'left': ''+(fix_rel_menu.offset().left-fix_logo.children('*:eq(1)').innerWidth())+'px',
                    });
                }
            }
        }else{
            ishod();
        }
    }
    
    // В исходную
    function ishod(){
        // на место барсик
        fix_logo.css({
            'top': '',
            'position': '',
            'z-index': '',
            'left': '',
            'width': '',
            'margin-left': '',
            'margin-top': '',
            'height': ''
        });
        
        // Блок картинки
        $('header [id^="ul-id-icon-"]').css({
            'height': '',
            'position': ''
        });
        if($('header [id^="ul-id-icon-"] span').length > 0){
            $('header [id^="ul-id-icon-"] span').css({
                'top': '',
                'position': '',
                'margin-top': '',
            });
            $('header [id^="ul-id-icon-"]').css('padding', '');
        }
        
        // Картинка
        fix_logo.find('img').parent('a').css({
            'height': '',
            'max-height': ''
        });
        fix_logo.find('img').css({
            'height': ''+fix_logoH+'px'
        });
        if(status_name == 1 && fix_slogan_display != 'none'){
            fix_logo.children('*:eq(1)').show();
            $('header [id^="ul-id-icon-"]').parent().children().show();
        }
    }
});
</script>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Похожие материалы:
Всего комментариев: 7
avatar
1
Скрипт работает на отлично и установился с первого раза без проблем. Широкие возможности для настройки даже для тех кто в этом коде мало что понимает, т.к. фрагменты кода с пояснениями на русском. Спасибо разработчикам, молодцы!!!
avatar
1
2
Пожалуйста smile
Были рады быть полезными.
avatar
3
Спасибо огромное за скрипты - оч и оч круто!!

По этому скрипту:
При фиксации лого /скрипт/, на демо сайте лого сдвигается немного влево..-это интереснее.
Как это сделать, не смог увидеть в скрипте необходимый параметр сдвига или отступа от левого края?
Либо, как сделать, если возможно, шапку "резиновую" ширину, по типу резинового блока?
Спасибо!
avatar
0
4
Здравствуйте!
Фиксированное меню во всю ширину сайта, к сожалению пока нету универсального скрипта, но когда ни будь мы его реализуем smile
По поводу существующего скрипта — "Фиксированный логотип" Используйте следующий код:
Код
<style>
.header-content-icon {
      left: auto!important;
}
</style>
Если Вам нужно указать свои отступы от левого края, установите значение в “px” Пример: left: 5px!important;
avatar
5
Спасибо огромное за Всю Вашу работу и скрипты на этом ресурсе!
avatar
6
у меня получилось спасибо но лого сайта не заходит в меню и повторяица только навигация без лого
avatar
0
7
У вас на сайте http://snikolaev.ukit.me установлен сторонний код, который меняет расположение логотипа: https://screenshot.ukit.com/src/sup/2018-02-17-18-36-34.png. Удалите его с раздела "Свой код" и попробуйте повторно зафиксировать меню
avatar