javascript - Div は、ヘッダーが上部に到達するとスクロールを開始し、下部がフッターに到達するとスクロールを停止します

Question

プロジェクトと呼ばれるページがあります。そのページには、「imagesGrid」と呼ばれる 1 つと「detailsBox」と呼ばれるもう 1 つの 2 つのグリッドがあります。ブロック）。「detailsBox」を作成して、ヘッダーが上部に達するとページのスクロールを開始し、下部がフッターの上部に達するとスクロールを停止しようとしています。また、機能が完全に機能しないようにし、画面サイズが 700px 未満の場合に「detailsBox」を相対的に配置するように設定しようとしています。

私は何十ものチュートリアルを試してみ ました。たとえば、div を画面の上部に固定し、フッターやhttp://jsfiddle.net/FDv2J/3/にヒットする前に停止します。

私の問題を解決するための最良の方法は何ですか? ページのライブ プレビューへのリンクは次のとおりです: http://www.loaidesign.co.uk/portfolio ?project=Test_Project そして、これが HTML と CSS です。上記のリンクで提供されているものだけでなく、ここからの他の多くのもの、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;
}