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

How to get function of both position values: Fixed and Absolute?

本文关键字：函数 何获得 位置 两个      更新时间：2023-09-26

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

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

如果背景图像的位置值为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%"); 
     }
  });
});

其实这更容易。很明显，当你点击侧边栏时，你会有一个按钮打开它。考虑到你的侧边栏在右边(就像你的示例主题一样)，你只需要调整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%";  
   }
};

但是你仍然需要窗口的概念。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

下面是一个例子:

假设背景是一个id为#bg的div，那么你所要做的就是在使用javascript调整窗口大小时调整bg，考虑到你的窗口何时开始可滚动。例如，当窗口宽度小于等于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%";
}

相关文章：