侧边栏在小屏幕的底部 [英] Sidebar is at bottom on smaller screens

问题描述

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

I am using Shopisle theme. I have displayed product category drop-down filter widget on the left side of shop page. But on the smaller screens, it automatically shifts at the bottom of the page. How can it be displayed on the top in smaller screens?

推荐答案

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

It can be done with some javascript on the window resize event. The sidebar is really on the right side in the HTML markup (Or more specifically, it's below). It appears on the left because css has the main section floating right.

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

On resize, css removed the float at width 767px. So the side bar falls to the bottom.

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

With jQuery's insertBefore (http://api.jquery.com/insertbefore/) as well as insertAfter, the html markup can be switched.

注意:这个例子移动了整个侧边栏.如果有必要，可以稍微修改一下以仅移动一个小部件.这表示一般过程.

NB: this example moves the entire sidebar. It can be modified a bit to move just a single widget if that's necessary. This indicates the general process.

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

**By the way, this script should be placed in a .js file for the child-theme. If a .js file is not already in place, then try adding it to the footer template file (preferably in child theme) within <script>...</script> tags.

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();
});

这篇关于侧边栏在小屏幕的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！