Плавающая панель навигации

[Sam Jack]

В шаблоне page_container_js_head вниз добавить код:

<script type="text/javascript">
$(function(){
    $(window).scroll(function(){
        // hauteur calculй en fonction des variables de style de Xenforo, si vous utilisez un logo personnalisй, modifiй les valeurs de la varaible de style suivante: Header et navigation
        if ($(window).scrollTop() > <xen:if is="!{$visitor.user_id}">{xen:calc '@headerLogoHeight + @headerTabHeight - 20'}</xen:if><xen:if is="{$visitor.user_id}">{xen:calc '@headerLogoHeight + @headerTabHeight'}</xen:if>) {
            $("#navigation").addClass("sticky");
        } else {
            $("#navigation").removeClass("sticky");
        }
    });
});
</script>

В шаблон EXTRA.css добавляем код:

#navigation { -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease;}
#navigation.sticky { position:fixed; top:0px; left:0px; right: 0; z-index:7499; opacity: 0.8;}
#navigation.sticky:hover { opacity: 1;}
#navigation.sticky  .navTabs { -webkit-border-radius: 0px; border-radius: 0px; }
#navigation.sticky .navTabs .navTab.selected .tabLinks { -webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px; -webkit-box-shadow:  0px 6px 2px -4px rgba(0, 0, 0, 0.4); box-shadow:  0px 6px 2px -4px rgba(0, 0, 0, 0.4)  }
#navigation.sticky .navTabs .navLink .itemCount {top: auto; bottom: -12px;}
#navigation.sticky .navTabs .navLink .itemCount .arrow { bottom: auto; top: -3px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FF0000; border-width: 3px; border-style: none solid solid;}
#navigation.sticky .navTabs .Popup.PopupContainerControl.PopupOpen .navLink .itemCount {position: inherit; padding: 2px 4px;}
#navigation.sticky .navTabs .Popup.PopupContainerControl.PopupOpen .navLink .itemCount .arrow {display: none;}