Question

我有一个名为project的页面，在该页面中有两个网格，一个名为“imagesGrid”，另一个名为“detailsBox”，它们彼此相邻使用（即两者都有50％的宽度和显示内联块）。我试图使“detailsBox”在标题到达顶部时开始滚动页面，并在其底部到达页脚顶部时停止滚动。我也试图完全停止工作，并在屏幕尺寸低于700px时将“detailsBox”设置为相对。

我尝试并试验了几十个教程，例如： 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“Float”VS Javascript

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

fixed   The element is positioned relative to the browser window

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

当标题到达顶部时，Div开始滚动，当底部到达页脚时停止滚动

1 个答案: