Fixed position and %width + not overlapping the footer
Question
There is a project page of two Grids, a grid that showcase images on the left side (width: 65%) and anther grid that show information about the project on the right side (width 35%).
Here is the link to a Live Preview: http://meeped.co.uk:93/portfolio/ambition-world.html
How to change the information grid that is on the right side to be fixed and scroll with the page? and to stop before hitting the footer.
Note: I have tried to change the position to Fixed, it make it scroll but the grid width keep stretching with the page and overflow the width of the page which is 1030px.
I have tried lot of JavaScript snippets to make it scroll and stop at the footer, but none worked. What would you recommend? without using a plugin.
The HTML of the page is as follows:
<!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>
The 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;
}
Also Here is a JS I am using:
//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 answers
solution1
0 2013-09-03 14:32:58
So, the issue is that, by adding position:fixed; you are positioning the sidebar relative to the viewport (which is the way fixed positioning works). This means that the width of a position:fixed; element will always be relative to the width of the viewport.
The way around this is to introduce a new wrapper element to the sidebar item and position this new element as fixed while the sidebar remains positioned normally.
Here is an example of how to do so... you want to add a wrapper once the user scrolls past (but only if the wrapper doesn't already exist), and remove the wrapper once they scroll back up (but only if it exists).
So, you can include in your 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" />');
}
}
});
Then, in your CSS, you can do the fixed positioning stuff.
.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;
}
This should work :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.