侧栏在较小的屏幕上位于底部(Sidebar is at bottom on smaller screens)

侧栏在较小的屏幕上位于底部(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的主要部分是右移的。

在调整大小，CSS删除宽度767px的浮动。 所以侧栏落到底部。

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

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.

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

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.

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