jQuery：根據屏幕寬度更改元素位置

例如，如果屏幕最初> 500px，則該元素應該位於x位置，否則，如果我調整屏幕大小並使其變小，則應重新定位該元素。這必須在不按下按鈕的情況下進行。

的jsfiddle：https://jsfiddle.net/zjgrmf24/2/

HTML：

<body> 
<div class="change_offset"> 
    reposition 
</div> 
<div class="here"> 
    move here 
</div> 
</body>

CSS：

.here { 
    margin-top:200px; 
    margin-left:100px; 
} 
.change_position { 
    position: absolute; 
}

JS：

$(document).ready(function(){ 
    herePos = $('.here').offset(); 
    change = $('change_offset'); 

    if($('body').width() < 500) 
    { 
    change.css({ 
     left: herePos.left + "px", 
     top: herePos.top + "px" 
    }) 
    } 
    else 
    { 
    change.css({ 
     left: 'auto', 
     top: 'auto' 
    }) 
    } 
})

來源

2016-02-16 Valip

是'.here'在同一個地方總是元素？如果是這樣，你可以在CSS中單獨實現而不需要任何JS代碼。 –

使用resize事件：

function handleResize() { 
    herePos = $('.here').offset(); 
    change = $('change_offset'); 

    if($('body').width() < 500) 
    { 
    change.css({ 
     left: herePos.left + "px", 
     top: herePos.top + "px" 
    }) 
    } 
    else 
    { 
    change.css({ 
     left: 'auto', 
     top: 'auto' 
    }) 
    } 
} 
$(document).ready(handleResize); 
$(window).on("resize", handleResize);

注：您的代碼墮入The Horror of Implicit Globals。聲明你的變量。

來源

2016-02-16 10:20:13

啊，對不起變數，我正在使用CoffeeScript :) – Valip

看到這裏https://jsfiddle.net/zjgrmf24/5/

我認識的第一件事，就是你沒有使用正確的選擇。另外你也應該使用窗口大小調整。

var resize = function() { 
    herePos = $('.here').offset(); 
    change = $('.change_position'); 

    if($('body').width() < 500) 
    { 
    change.css({ 
     left: herePos.left + "px", 
     top: herePos.top + "px" 
    }) 
    } 
    else 
    { 
    change.css({ 
     left: 'auto', 
     top: 'auto' 
    }) 
    } 
} 

$(document).ready(resize); 
$(window).on('resize', resize);

來源

2016-02-16 10:29:48 eTomate

jQuery：根據屏幕寬度更改元素位置

回答

相關問題