我有一个名为 project 的页面，在该页面中有两个网格，一个称为“imagesGrid”，另一个称为“detailsBox”，它们彼此相邻浮动（即两者的宽度都为 50% 并显示内联-堵塞）。我试图让“detailsBox”在页眉到达其顶部时开始滚动页面，并在其底部到达页脚顶部时停止滚动。我还试图完全停止该功能的工作，并将“detailsBox”设置为在屏幕尺寸低于 700 像素时定位为相对位置。
我已经尝试并尝试了数十个教程，例如： 让 div 粘在屏幕顶部并在点击页脚和http://jsfiddle.net/FDv2J/3/之前停止，没有希望。
解决我的问题的最佳途径是什么？这是页面实时预览的链接：http://www.loaidesign.co.uk/portfolio ?project=Test_Project 这里是 HTML 和 CSS，我没有可用的 JavaScript 脚本，我厌倦了上面链接中提供的那些以及来自这里的许多其他链接，谷歌和 codepen，但似乎无法让它们为我工作。
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;
}