Question

我知道这听起来有点违反直觉，但让我解释一下我要做的事情。

我有一个大元素作为背景。它没有调整大小。它通常比查看的屏幕大。这个元素的大部分内容（它只是一个图像）靠近中心。假设唯一的NECESSARY信息在中间800px，整个事件是1600px宽。

为什么它比必要的更宽？因为它在背景的其余部分中令人愉悦地消失，并且增加了网站的设计。

所以我修复了元素，并使用标准技巧使其居中。它在大型显示器上完美运行。它保持居中，如果它有些太大，它不允许你滚动以查看基本上什么都没有。我喜欢那样。

但是如果屏幕太小，你就看不到它了。你不能只设置页面的最小宽度或最小高度，因为当你去滚动时，背景图像保持不变，因为它是固定的。

如果有一种方法可以让一个固定元素在页面滚动时与其他所有元素一起移动，那将完美地工作，因为我可以将min-width指定为图像所需元素的大小。那会很有效。

否则，另一种解决方案是使用其他形式的定位，以防止能够滚动查看整个事物。然后，再次，我可以设置整个最小宽度，这将允许我准确设置多少内容可滚动。

这有可能吗？我觉得我错过了一些简单的事情。理想情况下，我不必调整任何图像的大小，提供多个css表，或使用任何精心设计的javascript或类似的东西。谢谢你的帮助！

Answer 1

经过大量的实验后，我终于解决了这个问题，解决方案结果是基本的CSS，非常棒。

我详细说明了这个解决方案at my blog。或者，这是working demo。

HTML

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>

Answer 2

我知道你不想使用精心设计的javascript .... JQuery库允许使用最少的代码对这样的事情进行一些很好的修复...你也可以使用一个相对较小的片段而不用jquery ..基本上你需要做的就是为window.scroll设置一个事件监听器，并设置你的fixedElement.scrollTop来匹配......

快速JQuery示例：

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});

Answer 3

我不是某些我确切地知道你想要做什么，但下面的CSS片段可能对你有所帮助。不确定。

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

您可以使用该代码段中的任何属性组合来设置您的定位，background-attachment是可滚动的属性。

如果你发布了你目前所拥有的css会很有帮助，所以我们可以真正帮助你。如果我能更清楚，请告诉我。

如何使“固定”元素可滚动

3 个答案:

HTML

CSS