HTML：具有固定背景的可滚动div
[英]Html: scrollable div with fixed background
问题描述
I'm trying to get a full-screen image background with a scrollable div on its center, so I wrote this code 
我试图获取全屏图像背景，其中心具有可滚动的div，所以我写了这段代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bio</title>
<link href="../css/layout-base.css" rel="stylesheet">
<script type="text/javascript" src="../jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(window).ready(function(){
var background = $('#background');
var scrollable = $('#scrollable-container');
var halfWhite = $('#halfWhite');
var halfBlack = $('#halfBlack');
/* calcolo dimensione finestra */
var maxWidth = $(window).width();
var maxHeight = $(window).height();
/* settaggio dimensioni immagine sfondo */
background.css("height",maxHeight);
background.css("width",maxWidth);
scrollable.css("height",maxHeight);
/* settaggio dimensioni riempimento sfondo */
halfWhite.css("height",maxHeight);
halfWhite.css("width",maxWidth/2);
halfBlack.css("height",maxHeight);
halfBlack.css("width",maxWidth/2);
});
$(window).resize(function(){
var background = $('#background');
var scrollable = $('#scrollable-container');
var halfWhite = $('#halfWhite');
var halfBlack = $('#halfBlack');
/* calcolo dimensione finestra */
var maxWidth = $(window).width();
var maxHeight = $(window).height();
/* settaggio dimensioni immagine sfondo */
background.css("height",maxHeight);
background.css("width",maxWidth);
scrollable.css("height",maxHeight);
/* settaggio dimensioni riempimento sfondo */
halfWhite.css("height",maxHeight);
halfWhite.css("width",maxWidth/2);
halfBlack.css("height",maxHeight);
halfBlack.css("width",maxWidth/2);
});
</script>
</head>
<body>
<div id="background">
<div id="halfWhite"></div>
<div id="halfBlack"></div>
<div id="scrollable-container">
<div class="content">
<div id="text"></div>
<a href="#" class="menu" id="home" target="_self"><img src="../media/index/tasto1.png"/></a>
<a href="#" class="menu" id="events" target="_self"><img src="../media/index/tasto2.png"/></a>
<a href="#" class="menu" id="gallery" target="_self"><img src="../media/index/tasto3.png"/></a>
<a href="#" class="menu" id="disco" target="_self"><img src="../media/index/tasto4.png"/></a>
</div><!--div content -->
</div>
</div><!-- div background -->
</body>
</html>
With the relative css: 与相对的CSS：
body{
overflow:hidden;
margin:0!important;
}
#background{
background-image:url(../media/index/back.png);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
}
#halfWhite{
position:relative;
background-color: white;
z-index: -10;
float: left;
}
#halfBlack{
position:relative;
background-color: black;
z-index: -10;
float: right;
}
#scrollable-container{margin-left: 15%;margin-right: 15%;background- color:rgba(0,0,0,0.00);}
.content{
height:98%;
position: relative;
top:1%;
padding-left: 15%;
padding-right: 15%;
box-shadow: -10px 2px 15px #dedede,10px -2px 15px #dedede;
-moz-box-shadow:-10px 2px 15px #dedede,10px -2px 15px #dedede;
-webkit-box-shadow:-10px 2px 15px #dedede,10px -2px 15px #dedede;
background-color:rgba(255,255,255,0.8);
}
#text{position:absolute;top:10%;width:100%;height:100000px;width:70%}
.menu{
width:15%;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.menu:hover{
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-o-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
.menu img{width:100%}
#home{position:absolute;top:0px;left:0px;}
#events{position:absolute;top:0px;right:0px;}
#gallery{position:absolute;bottom:0px;left:0px;}
#disco{position:absolute;bottom:0px;right:0px;}
I want the #text div to scroll while the rest of the page has to stay fixed (so that the background is always on the same position), but when I add overflow property to the parent divs there are strange side effects (for example, the .content div goes to the very bottom of the page). 我希望#text div滚动，而页面的其余部分必须保持固定（以便背景始终位于同一位置），但是当我将溢出属性添加到父div时，会有奇怪的副作用（例如， .content div进入页面的最底部）。 How can I achieve this behaviour? 我该如何实现这种行为？ Is this the correct way to make this kind of layout? 这是进行这种布局的正确方法吗？
2 个解决方案
解决方案1
0 2014-05-15 15:46:24
You need to place your background first in your html and give it a property of position: fixed. 您需要先将背景放置在html中，并为其指定位置属性：fixed。 Then the rest of your html needs to go on top without the fixed property. 然后，其余的html需要不带固定属性的顶部。 I do this a lot in a program I'm developing 我在正在开发的程序中做了很多
解决方案2
0 2014-05-15 16:03:14
使其#text div style="position:fixed" ，其余部分#text position:absolute 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.