Question

尝试在窗口调整大小时将徽标图像移回原始位置。我使用.prepend原来移动徽标，但在第一个前置后它不会移回原来的位置。

function moveLogo() {
var logo = $(".logo-wrapper");
var navTile $(".nav-tile");
var mobileBar = $(".mobile-nav-bar");
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth, //gets precise browser width
    y = w.innerHeight || e.clientHeight || g.clientHeight; //gets precise height



    if (x <= 587) {

        logo.prependTo(mobileBar);

    } else {

        logo.prependTo(navTile);

    }



}
window.onload = moveLogo;
window.onresize = moveLogo;

哇，所以后mplungjan送我去，弗拉德的推荐让我意识到我做错了什么。我补充说：

var doit;
window.onresize = function(){
clearTimeout(doit);
doit = setTimeout(moveLogo, 50);
};

这很有效！我看到我使用javascript的方式实际上并没有在resize事件结束时调用我的函数。

Answer 1

使用JS是不必要的。您可以将徽标放在.mobile-nav-bar和.nav-title中来使用纯CSS。

然后使用以下css：

.mobile-nav-bar .logo-wrapper{
    display:block;
}
.nav-title .logo-wrapper
    display:none;
}

@media (min-width: 587px){
    .mobile-nav-bar .logo-wrapper{
        display:none;
    }
    .nav-title .logo-wrapper{
        display:block;
    }
}

返回已经预先放在窗口大小调整上的元素

1 个答案: