Question

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

当侧边栏弹出时，它会将背景图像重新调整为较小的尺寸，以免覆盖它而将其剪掉。当侧边栏缩回时，图像会向后扩大。

如果背景图片的位置值为绝对值，我只能获得此效果。但是，该值也不允许您滚动而没有背景结束并获得空白或不得不重复图像以填充空白区域。

当我修改位置值时，它解决了空白区域问题，但是当您打开侧边栏时不再重新调整背景图像的大小，它会像您期望的那样覆盖部分背景。

如何获得Fixed和Absolute的位置值的效果？我希望它无限期地滚动而不必复制图像，但是当侧边栏打开时也要重新调整大小。

以下是我使用的主题，说明了我的问题：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%"); 
     }
  });
});

Answer 1

这里有一个例子：

让我们说背景是一个id为#bg的div，那么当你的窗口开始可滚动时，你需要做的就是在使用javascript调整窗口大小时调整bg的大小。例如，当你的窗口宽度为800px或更低时，你的窗口开始是X-scrollable;当它的高度是500px时，你的窗口开始是Y-Scrollable：

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

希望这会对你有所帮助。

Answer 2

其实这更容易。显然，当你点击它时，你会有一个打开侧边栏的按钮。考虑到您的侧边栏位于右侧（就像您的示例主题一样），您只需要调整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。

如何获得两个位置值的功能：固定和绝对？

2 个答案: