javascript - 如何获得两个位置值的函数:固定值和绝对值？

我有全屏背景图片。我也有一个弹出式侧边栏。

当侧边栏弹出时，它会重新调整背景图片的大小，以使其不会被覆盖遮住。当侧边栏缩回时，图像将放大回去。

如果背景图像的位置值为绝对值，则只能获得此效果。但是，该值也不允许您在没有背景结束和获得空白或必须重复图像以填充空白的情况下滚动。

当我固定位置值后，它解决了空白问题，但是当您打开侧边栏时不再调整背景图像的大小，它可以覆盖您期望的部分背景。

如何获得固定和绝对位置值的影响？我希望它可以无限滚动，而不必复制图像，而且还可以在打开侧栏时调整大小。

这是我正在使用的主题，它说明了我的问题：http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/

$(function() {
 $('#openSidebar').click(function() {

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



 $('#closeSidebar').click(function() {

     if ( $('#sidebar').width() == 300 ) {
         var y = window.innerWidth;
         $("#imageContainer").width(y);
     }
     else  {
         $('#sidebar').width(0);
         $('#imageContainer').width("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的宽度。

编辑：

$(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%");
         }
      });
});

我刚刚测试过并且工作正常，唯一的区别是它使用了jQuery。