Опубликовано: 26 октября 2015
Как сделать плавающее горизонтальное меню Есть решение
Как сделать плавающее горизонтальное меню, что бы при прокрутки вниз панель оставалась в верху экрана.
- Коломна, ул. Кирова, 60а, офис 7
- +7 (995) 656-25-45
- kolmakov.igor@gmail.com
Комментарии (6)
1. В файле "theme.script.html" (сайт-дизайн-шаблоны) в самый конец файла вставьте код:<script type="text/javascript"> </script>
<!-- плавающее горизонтальное меню --> <script type="text/javascript"> $(function(){ var placeholder = $('<div>'); $('.tree-wrapper.hide-on-med-and-down').after(placeholder.css({ 'height': '70', 'display': 'none'})); $(window).scroll(function() { if ( MatchMedia("only screen and (min-width: 993px)") ) { if ( $(this).scrollTop()>=250 ) { $(".tree-wrapper").addClass( "fixed" ); placeholder.show(); }else if ( $(this).scrollTop()<240 ) { $(".tree-wrapper").removeClass( "fixed" ); placeholder.hide(); } } }); }); </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; } }в блоке пользовательских стилей пропишите правило:
@media only screen and (min-width: 993px) { .product-sidebar.fly { margin-top: 60px; } }Так же Вы можете изменить высоту и цвет фона плавающего меню:
в блоке пользовательских стилей пропишите правило:
.tree-wrapper.fixed { height: 31px; /* высота меню */ line-height: 30px; /* высота линий и активного элемента */ background-color: #F7FFAF; /* цвет фона */ }Всё выше описанное применил на своём сайте. все работает. Спасибо!
а как сделать чтобы при переходе на товар, было видно и заголовок h1?
как это было до установки плавающего меню, при переходе на страницу товара.
заранее спасибо.
В файле product.html строку:
$('html,body').animate({ scrollTop: $('#productheader').offset().top }, 800);замените строкой:
$('html,body').animate({ scrollTop: $('#productheader').offset().top - 60 }, 800);То что нужно. Спасибо!
Здравствуйте, возникла проблема с мобильной версткой после добавления кода стали наезжать иконки на категории.
Заменили строку:
$(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 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>