代码之家 › 专栏 › 技术社区 › richerimage

调整窗口大小时移动内容

window-resize jquery javascript

richerimage · 技术社区 · 11 年前

在桌面视图中,我使用以下jQuery将内容从移动视图中主内容列的顶部移动到侧边栏的顶部。

if (ww >= 768) {
  $( '#move-me' ).insertBefore($( '#top-widget' ) );
}

这是一把小提琴: http://jsfiddle.net/richerimage/co6nw6va/1/

这在页面加载时很好,但我希望内容能够在窗口重新调整大小时前后移动

就像所有事情一样,我想如果你知道怎么做,这很容易!:)

非常感谢您的帮助

谢谢

理查德

p、此外,是否有方法将内容移动到 #sidebar 无需参考 #top-widget ?

2 回复 | 直到 11 年前

Moshtaf 11 年前

试试看:

$( document ).ready(function() {
    doThis();
});

$( window ).resize( function() {
    doThis();
});

function doThis(){
    var ww = document.body.clientWidth;
    if (ww >= 768) {
        $( '#move-me' ).insertBefore($( '#top-widget' ) );
    }else{
        $( '#move-me' ).insertBefore($( '.post_content' ) );
    }
}

Check JSFiddle Demo

antyrat Andy 11 年前

所以你需要使用 resize 事件处理程序:

$( window ).resize( function() {
    var ww = document.body.clientWidth;
    if (ww >= 768) {
        $( '#move-me' ).insertBefore($( '#top-widget' ) );
    }
});

jsFiddle