javascript - 正文背景位置必须相对于页面元素

Question

我有一个正文背景，它必须相对于页面元素(#container)。当调整页面大小(较小宽度)时，容器向左移动(因为它居中)。背景也应该向左移动相同的量。

现在我得到了以下代码，它可以解决我的问题:

/*
 * The background must be relative to the rest of the page elements.
 * The background position.left = 0px when the offset.left of the container = 362.
 * The new background position.left is based on the current position of the container.
 */
var beginBackgroundPositionLeft = 362;
function changeBackgroundPosition() {
    var newLeft = jQuery("div.container").offset().left;
    newLeft = (-1 * beginBackgroundPositionLeft + newLeft) + "px";
    jQuery("body").css("background-position", newLeft + " 0px");
}

jQuery(window).resize(function(e){
    console.log(e);
    // Change the position of the background 
    // when resizing the window.
    changeBackgroundPosition();
});

jQuery(document).ready(function() {

    // Change the position of the background on entering the page..
    // Is needed because we don't know the resolution of the user so it can't be done with css.
    changeBackgroundPosition();
});

它工作正常，但在调整浏览器高度时也会执行。如何检查浏览器是否水平调整大小，以便可以忽略调整高度？

当然可以保存当前的窗口宽度并检查它是否已更改，但我正在寻找更好的方法(并学习一些我还不知道的东西；))!

正如你所看到的，我已经记录了调整大小函数的“e”，但在其中找不到任何对我有用的东西..

希望能学到一些您的建议。谢谢!

Answer 1

如果仅更改窗口宽度，这就是我“做某事”的方式。恐怕调整大小事件对象中没有太多内容可以让您以更好的方式检测到这一点。也许你可以通过在 CSS 属性的背景位置中尝试百分比来找到一些东西:

var $window = $(window),
    w = $window.width();

$window.resize(function(e) {
    if (w = $window.width() == w) {
        return;
    }
    console.log('width changed');
});