固定位置和％width +不与页脚重叠
[英]Fixed position and %width + not overlapping the footer
问题描述
有一个包含两个网格的项目页面，一个网格在左侧显示图像（宽度：65％），另一个花药网格在右侧显示有关项目的信息（宽度35％）。
这是实时预览的链接： http://meeped.co.uk:93/portfolio/ambition-world.html : http://meeped.co.uk:93/portfolio/ambition-world.html : http://meeped.co.uk:93/portfolio/ambition-world.html portfolio/ http://meeped.co.uk:93/portfolio/ambition-world.html
如何更改要固定的右侧信息网格并随页面滚动？ 并在点击页脚之前停下来。
注意：我尝试将位置更改为“固定”，使其滚动，但网格宽度随着页面不断拉伸，并溢出了1030px的页面宽度。
我尝试了很多JavaScript代码段来使其滚动并停在页脚，但是没有一个起作用。 你会推荐什么？ 无需使用插件。
页面的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;
});
1 个解决方案
解决方案1
0 2013-09-03 14:32:58
因此，问题在于，通过添加position:fixed; 您正在相对于视口定位侧边栏（这是固定定位的工作方式）。 这意味着position:fixed;的宽度position:fixed; 元素将始终相对于视口的宽度。
解决方法是在侧边栏项目中引入一个新的包装元素，并在侧边栏保持正常定位的同时将该新元素 fixed定位。
这是一个操作方法的示例...您想在用户滚动过去时添加一个包装器（但仅在该包装器不存在时），并在他们向上滚动时删除该包装器（但前提是该包装器存在）。
因此，您可以在JS中添加：
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
if ($('.fixie').length == 0) {
$('.detailsBox').wrap('<div class="fixie" />');
}
}
else {
$('.scrollup').fadeOut();
if ($('.fixie').length != 0) {
$('.detailsBox').unwrap('<div class="fixie" />');
}
}
});
然后，在CSS中，您可以进行固定定位。
.fixie {
width:1030px;
position:fixed;
top:100px; /* or however much you want */
left:50%;
margin-left:-515px;
/* these two lines center the wrapper */
padding:0 20px; /* to match the replaced wrapper */
}
.detailsBox {
float:right;
}
.imagesGrid {
float:left;
}
这应该工作:)
按固定位置的元素重叠页脚
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.