侧边栏位于较小屏幕的底部

Question

我正在使用Shopisle 主题。我在商店页面的左侧显示了产品类别下拉过滤器小部件。但在较小的屏幕上，它会自动在页面底部移动。如何在较小的屏幕上显示在顶部？

Answer 1

可以在窗口调整大小事件中使用一些 javascript 来完成。侧边栏实际上位于 HTML 标记的右侧（或者更具体地说，它在下面）。它出现在左侧是因为 css 的主要部分向右浮动。

在调整大小时，css 移除了宽度为 767 像素的浮动。所以侧边栏落到了底部。

使用jQuery的insertBefore(http://api.jquery.com/insertbefore/)以及insertAfter，可以切换html标记。

注意：这个例子移动了整个侧边栏。如果有必要，可以对其进行一些修改以仅移动一个小部件。这表明了一般过程。

**顺便说一下，这个脚本应该放在子主题的 .js 文件中。如果 .js 文件还没有到位，请尝试将其添加到 <script>...</script> 标签内的页脚模板文件（最好在子主题中）。

var sidebar_at_top = false;
function formatdisplay(){
  if(jQuery( window ).width() < 768){
    if(!sidebar_at_top){
        console.log('moving sidebar to before main area');
            jQuery('.sidebar-shop').insertBefore(jQuery('.shop-with-sidebar'));
        sidebar_at_top = true;
    }
  }else{
    if(sidebar_at_top){
        console.log('moving sidebar to after main area');
            jQuery('.sidebar-shop').insertAfter(jQuery('.shop-with-sidebar'));
        sidebar_at_top = false;
    }
  }
}
jQuery( window ).resize(function() {
    formatdisplay();
});
jQuery( document ).ready(function() {
    formatdisplay();
});