Сайт на WordPress, тема BeTheme. Сайдбар WooCommerce с виджетами в мобильной версии отображается под всеми товарами, нужно отобразить вверху.
1 ответ
Тут проще всего сделать на js.
jQuery(document).ready(function ($) {
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
function moveSidebar() {
var sidebar = $('.sidebar');
var content = $('.sections_group');
if (sidebar.length) {
if (($(window).width() + getScrollbarWidth()) < 768) {
sidebar.insertBefore(content);
} else {
sidebar.insertAfter(content);
}
}
}
// Resize handler
$(window).resize(function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
moveSidebar();
}, 300);
});
moveSidebar();
});
После загрузки страницы и при изменении её размера вызывается функция moveSidebar()
. В зависимости от ширины окна плюс ширины скроллбара (для точного соответствия css ширине), сайдбар переставляется перед контентом или после него.