当页眉到达顶部时div开始滚动，当底部到达页脚时停止滚动

Question

我有一个名为 project 的页面，在该页面中有两个网格，一个称为“imagesGrid”，另一个称为“detailsBox”，它们彼此相邻浮动（即两者的宽度都为 50% 和显示内联块）。我试图让“detailsBox”在页眉到达其顶部时开始滚动页面，并在其底部到达页脚顶部时停止滚动。我还试图完全停止该功能的工作，并将“detailsBox”设置为在屏幕尺寸低于 700 像素时定位为相对位置。

我已经尝试过几十个教程，例如： make div stick to the top of the screen and stop before hitting the footer 和 http://jsfiddle.net/FDv2J/3/ 没有希望。

解决我的问题的最佳途径是什么？这是页面实时预览的链接：http://www.loaidesign.co.uk/portfolio?project=Test_Project 这是 HTML 和 CSS，我没有可用的 JavaScript 脚本，我厌倦了上面链接中提供的那些以及来自这里的许多其他链接，google 和 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;
}

Answer 1

您可能想查看StickyFloat

它使用 JS 来实现你想要的。您遇到的问题是您试图使用 CSS 有条件地做某事，而实际上这不是 CSS 的用途

CSS“浮动”VS Javascript

如果你想让浮动的 div 一直保持在某个位置，没关系。但是 CSS 无法区分页面上的元素。这是official spec：

fixed   The element is positioned relative to the browser window

问题已修复，仅与浏览器窗口有关，与其他元素无关。另一方面，JS 使用 DOM 在页面上创建元素数组，您可以为其创建条件。强烈建议查看 StickyFloat 或其他“粘性”JS 插件 :)