I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like: make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p><a href="http://adoniscars.com" target="_blank">www.adoniscars.com</a>
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <a href="#" class="facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;" class="facebook"><span>Facebook</span></a> <a href="#" class="twitter" onclick="return popitup('https://twitter.com/share')"><span>Twitter</span></a>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> <a href="../portfolio.html">Go Back</a>
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.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: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}
