在我的模板上,我有一个右侧边栏容器,在响应式(移动)视图中需要移动到页面顶部。因为这个容器在 DOM 中较低,所以它显示在我所有的内容下方。我写了这个脚本来移动它,问题是当你在窗口大小之间切换时,它不会向后移动。(对我来说有点烦人的错误,用户永远不会看到)
可以在http://sandbox.dev.activemls.com/agent/找到该行为的实时示例
这是我的代码:
var moveSidebar = function() {
var windowsize = $(window).width(),
isDesktop = windowsize > 765;
if(!isDesktop) {
$('#sidebar-3').insertAfter($('#sidebar-1'));
}
else if (isDesktop) {
$('#sidebar-3').insertAfter($('#moveSidebar'));
}
}
$(document).ready(moveSidebar);
$(window).on("resize.showContent", moveSidebar);
moveSidebar();
然后html看起来像这样:
<div id="sidebar-1">
<!--sidebar content-->
</div>
<div id="sidebar-2">
<!--sidebar content-->
</div>
<div id="moveSiderbar">
<div id="sidebar-3" class="well well-small">
<!--sidebar content-->
</div>
</div>