我目前在一个网站上工作，其中一个页面包含一个 jQuery 动画函数，div当我沿着页面滚动时它会移动一个容器。这很好用，但是当我放大或放大屏幕时，它会与页脚重叠。
我怎样才能解决这个问题？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/css.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js "></script>
<script type="text/javascript" src="../js/js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Larger thumbnail preview
$("#thumbImages.thumb p").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '170px',
height: '170px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("#thumbImages.thumb p a").click(function() {
$('#wrapper').append('<span id="imageLoad">LOADING...</span>');
$('#imageLoad').fadeIn('normal');
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage }, hideLoader());
return false;
function hideLoader() {
$('#imageLoad').fadeOut('normal');
}
});
});
</script>
<script>
$().ready(function() {
var $main_view = $("#main_view");
$(window).scroll(function(){
$main_view
.stop()
.animate({"marginTop": ($(window).scrollTop() - 14) + "px" }, "slow" );
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Header</h1>
<ul>
<li id="nav1"><a href="../index.html">Welcome</a></li>
<li id="nav1"><a href="about.html">Why Us</a></li>
<li><a href="facilities.html">Facilities</a></li>
<li id="nav1"><a href="services.html">Services</a></li>
<li id="nav1"><a href="products.html">Products</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="other.html"> Other </a>
<ul>
<li><a href="7RepairSteps.html"> Repair Steps</a></li>
<li><a href="scaletrix.html">Scaletrix</a></li>
<li><a href="reviews.html">Customer Reviews</a></li>
</ul>
</li>
<li id="nav1"><a href="contact.html">Contact Us</a></li>
</ul>
<div id="content">
<div id="portfolioImages" style="height:900px;">
<h2>Our Work</h2>
<div class="thumb" id="thumbImages">
<p style="z-index: 0;"><a href="../images/portfolio/before1.jpg"><img class="" src="../images/portfolio/before1.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/before1i.jpg"><img class="" src="../images/portfolio/before1i.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/after1.jpg"><img class="" src="../images/portfolio/after1.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/after1i.jpg"><img class="" src="../images/portfolio/after1i.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/before2.jpg"><img class="" src="../images/portfolio/before2.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/after2.jpg"><img class="" src="../images/portfolio/after2.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/before3.jpg"><img class="" src="../images/portfolio/before3.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/after3.jpg"><img class="" src="../images/portfolio/after3.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/before4.jpg"><img class="" src="../images/portfolio/before4.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/after4.jpg"><img class="" src="../images/portfolio/after4.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/before5.jpg"><img class="" src="../images/portfolio/before5.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/before5i.jpg"><img class="" src="../images/portfolio/before5i.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/after5.jpg"><img class="" src="../images/portfolio/after5.jpg" alt=""></a></p>
<p style="z-index: 0;"><a href="../images/portfolio/after5i.jpg"><img class="" src="../images/portfolio/after5i.jpg" alt=""></a></p>
</div>
<div style="border:solid; width:410px; overflow:hidden; float:right"" id="main_view"><a href="" title="" target=""><img src="../images/portfolio/before1.jpg" alt="" /></a></div>
</div>
</div>
<div id="foot" style="position:relative;"> Footer Information </div>
</div>
</body>
</html>
CSS：
#content a:link {color:#686868; text-decoration:none;}
#content a:visited {color: #686868; text-decoration:none;}
#content a:hover {color: #686868; text-decoration:none; font-weight:bold;}
#content a:active {color: #686868; text-decoration:none;}
#content a:focus{color: #686868; text-decoration:none;}
body {
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
color: #343434;
background: #7DC623;
margin: 0;
padding: 0;
}
#wrapper {
width: 710px;
margin: 30px auto;
background: #0d0d0d url(../images/header.jpg) no-repeat;
padding: 55px 25px 25px 25px;
border: 12px solid #2e2e2e;
position:relative;
}
h1 {
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0.3em 0;
text-indent:-99999px;
}
ul {
list-style: none;
padding: 0;
margin: 10px 0 20px 0;
background: #2e2e2e url(../images/nav_bar.jpg) repeat-x;
display: block;
font-size: 0.9em;
height:33px;
text-transform:capitalize;
text-align: center;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
margin-top: 0;
}
ul li a {
display: block;
text-decoration: none;
color: #49BDEF;
padding: 10px 20px;
margin-top: 0;
text-align: center;
}
input{
color: #49BDEF;
padding: 10px 20px;
margin-top: 0;
background: #2e2e2e url(../images/nav_bar.jpg) repeat-x;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #1b1b1b url(../images/nav_bar_o.jpg) repeat-x;}
li:hover li a:hover {
background: #1e7c9a;
}
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background: url(../images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
#imageLoad {
display: none;
position: absolute;
right: 10px;
top: 10px;
background: url(../images/loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
#content {
}
h2 {
margin: 0;
padding: 0.5em 0;
color:#568945;
font-family:Helvetica, Arial, Sans-serif;
}
p {
margin: 0;
padding: 0.4em 0;
color:#686868;
line-height:1.4em;
}
#content img.right {
float: right;
margin: 0 0 8px 8px;
}
#content img.left {
float: left;
margin: 0 8px 2px 4px;
}
#productImage{
width: 193px;
height:145px
}
#productImage:hover{
width: 250px;
height:200px;
}
#sampleImage{
width: 193px;
height:145px;
border: 1px solid #CCCCCC;
}
#sampleImage:hover{
width: 250px;
height:200px;
border: 1px solid #CCCCCC;
}
#foot {
padding: 15px;
color: white;
text-align: center;
margin: 30px 0 0 0;
border-top:1px solid #222222;
}
#searchbox
{
height: 30px;
position: relative;
overflow: hidden;
border-style: solid;
border-color: #0d0d0d;
}
#searchbox:hover
{
height: 100%;
position: relative;
border-style: solid;
border-color: #0d0d0d;
}
#content {
}
#thumbImages.thumb {
float:left;
list-style: none;
margin: 0; padding: 10px;
width: 260px;
}
#thumbImages.thumb p {
margin: 0; padding: 5px;
position: relative;
width: 110px;
float:left;
height: 110px;
}
#thumbImages.thumb p img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#thumbImages.thumb p img.hover {
background:none;
border: none;
}
#main_view img {
height: 310px;
width: 410px;
border: none;
}