【发布时间】：2013-09-03 14:13:04
【问题描述】：
有两个网格的项目页面，左侧显示图像的网格（宽度：65%）和右侧显示项目信息的另一个网格（宽度 35%）。
这是实时预览的链接：http://meeped.co.uk:93/portfolio/ambition-world.html
如何将右侧的信息网格更改为固定并随页面滚动？并在到达页脚之前停止。
注意：我尝试将位置更改为固定，它使其滚动但网格宽度随着页面不断拉伸并溢出页面的宽度，即 1030 像素。
我尝试了很多 JavaScript sn-ps 来让它滚动并停在页脚，但没有一个奏效。你会推荐什么？不使用插件。
页面的HTML如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /
<meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="../assets/css/core.css">
<link rel="stylesheet" type="text/css" href="../assets/css/fixes.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="../assets/css/tablets-portrait.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="../assets/css/phone.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<a href="../index.html"><img src="../assets/elements/logo.png"/></a>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li><a href="../index.html">Home</a></li>
<li><a href="../portfolio.html">Portfolio</a>
<li><a href="../about.html">About Me</a></li>
<li><a href="../contact.html">Contact Me</a></li>
<li><a href="../blog.html">Blog</a></li>
</ul></nav>
</div>
</div>
</header>
<!--Website Content--><div id="Page">
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">LOAI Design Studio</p>
</div>
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
</div>
</div>
</div>
</div>
<!--Footer Section--><footer>
<div id="footer-sectionA">
<div class="footerContent">
<h3><strong>Want to get started?</strong></h3>
<p>I offer free, no-obligation consultation, will review your project <br> & discuss ways to achieve your goals within your budget & time frame.</p>
<p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&v=1afd868e">Schedule an Appointment Now</a></p>
</div>
</div>
<div id="footer-sectionB">
<div class="footerContent">
<p>Copyright ©2012 LOAI Design Studio. <br> All rights reserved.<a href="../terms-and-conditions.html">Terms & Conditions.</a></p>
</div>
</div>
</footer>
</div><!--The End Of The Page-->
<!--Scripts Links-->
<script type="text/javascript" src="../assets/libraries/jquery.js"></script>
<script type="text/javascript" src="../assets/js/slider.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
<script src="../assets/libraries/modernizr.js"></script>
<!--GoSquared Scripts-->
<script type="text/javascript">
var GoSquared = {acct: "GSN-035800-K"};
(function(w){
function gs(){
w._gstc_lt = +new Date;
var d = document, g = d.createElement("script");
g.type = "text/javascript";
g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(g, s);
}
w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
})(window);
</script>
</body>
</html>
CSS
/*Portoflio Project Page*/
#portfolio-projectPage{
text-align: left;
position: relative;
}
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img{
border: 1px solid #E8E8E8;
margin-bottom: 10px;
}
.imagesGrid p {
border-top: 1px solid #E8E8E8;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
width: 35%;
margin-top: 28px;
padding-left: 45px;
}
.detailsBox p {
border-bottom: 1px solid #E8E8E8;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p, h3 {
vertical-align: bottom;
}
.detailsBox a {
vertical-align: middle;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #E8E8E8;
margin: 0;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a{
background-color: #E8E8E8;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover{
color: #FFFFFF;
background-color: #456087;
}
.detailsBox div br {
display: none;
}
.shareButtons a {
margin-left: 3px;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.shareButtons a span {
display: none;
}
还有一个我正在使用的 JS：
//Scroll-up button//
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
}
else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600); return false;
});
【问题讨论】：
-
Page not found.. ;)。如果您提供链接，请提供一个公开的 -
不完全是“实时”预览。 ;)
-
啊！抱歉，这里是正确的链接：meeped.co.uk:93/portfolio/ambition-world.html
-
您似乎已经在通过将“向上”链接添加到侧边栏来检测滚动。你能展示一下这样做的javascript吗？应该只是简单地添加定位。
-
确实是
//Scroll-up button// $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; });
标签： javascript css html scroll fixed