Javascript 如何获得两个位置值的函数：固定值和绝对值？

我有一个全屏背景图像。我还有一个弹出的侧边栏

当侧边栏弹出时，它会将背景图像的大小调整得更小，这样就不会通过覆盖它而将其切断。当侧边栏缩回时，图像会放大

只有当背景图像的位置值为绝对值时，我才能获得这种效果。但是，这个值也不会让你滚动没有背景结束，并获得空白或必须重复的图像，以填补空白。

当我使位置值固定时，它解决了空白空间问题，但是当打开侧栏时，不再重新调整背景图像的大小，它覆盖了你所期望的部分背景。p> 如何获得固定和绝对位置值的效果？我希望它可以无限滚动，而不必复制图像，但也可以在侧边栏打开时重新调整大小

下面是我正在使用的主题，它说明了我的问题：

---

这是一个例子：

假设背景是一个id为#bg的div，那么您所要做的就是在使用javascript调整窗口大小时调整bg的大小，考虑到您的窗口何时开始可滚动。例如，如果您的windows在其宽度为800px或更小时开始可X滚动，在其高度为500px时开始可Y滚动：

window.onresize = function() {
    if ( window.width < 800 ) document.getElementById("#bg").style.width = "800px";
    else document.getElementById(#bg).style.width = "100%";

    if ( window.height < 500 ) document.getElementById("#bg").style.height = "500px";
    else document.getElementById("#bg").style.height = "100%";
}

window.onresize=function（）{
if（window.width<800）document.getElementById（“#bg”）.style.width=“800px”；
else document.getElementById（#bg）.style.width=“100%”；
if（window.height<500）document.getElementById（“#bg”）.style.height=“500px”；
else document.getElementById（“#bg”）.style.height=“100%”；
}

---

希望这对你有帮助。

实际上这更容易。显然，当你点击侧边栏时，你会有一个按钮打开它。考虑到你的边栏在右边（就像你的示例主题），你只需要调整bg的宽度，保持高度不变。这就是代码：

document.getElementById("sidebar-button").addEventListener("click", doStuff, false);

doStuff = function() {
   var sb = document.getElementById("sidebar");
   var bgnd = document.getElementById("bg");

   if ( sb.style.width == 0 ) {
       sb.style.width = "300px";
       var y = window.innerWidth;
       bgnd.style.width = y - 300 + "px";
   }

   else {
       sb.style.width = "0px";
       bgnd.style.width = "100%";  
   }
};

但您仍然需要window.onresize的概念，以便可以正确调整bg的宽度

编辑：

---

我刚刚进行了测试，效果很好，唯一的区别是它使用了jQuery。

我想你几乎已经拥有了它。我需要这样一句话：“如果侧边栏被打开，则宽度和高度分别减少x%”，然后反过来说：“如果侧边栏被关闭，则增加…”这是怎么做的？因为屏幕没有被重新调整大小。所以我需要像.onclick（openSidebar）{减少背景img宽度和高度5%}这样的东西，然后.onclick（closeSidebar）{增加背景img宽度和高度5%}这样的东西不起作用。我用有效的ID替换了ID，但什么也没发生。你是对的，它应该是（sb.style==0），而不是Mm，不起作用。我会把我放在原帖上的东西登广告。谢谢你的帮助，顺便说一句。当我关闭侧边栏时，一个与侧边栏大小相同的空白黑色区域会留下，并且不会消失。我发现了，我复制了几次你的代码，并对其进行了一些修改。我将在上面发布它，以便您可以看到；没有必要使用它两次。只需在第一个函数中删除所有函数

document.getElementById("sidebar-button").addEventListener("click", doStuff, false);

doStuff = function() {
   var sb = document.getElementById("sidebar");
   var bgnd = document.getElementById("bg");

   if ( sb.style.width == 0 ) {
       sb.style.width = "300px";
       var y = window.innerWidth;
       bgnd.style.width = y - 300 + "px";
   }

   else {
       sb.style.width = "0px";
       bgnd.style.width = "100%";  
   }
};

$(function() {
     $('#sidebar-button').click(function() {

         if ( $('#sidebar').width() == 0 ) {
             $('#sidebar').width( 300 );
             var y = window.innerWidth;
             $("#bg").width(y-300);
         }
         else  {
             $('#sidebar').width(0);
             $('#bg').width("100%"); 
         }
      });
});