How do I scroll an element with the page, but confine it to it’s parent DIV?

By
Admin
– October 6, 2011Posted in: Questions & Answers

I am using the method described here: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Initially, I can get everything working (current CDN loaded jquery) but when scrolling to the bottom of the page the sidebar element carries on scrolling down, which makes the page longer, which it then scrolls down again creating an infinite scroll.

I want to confine the sidebar to within the parent element – in this case main-container. When the element hits the bottom of this div, I want it to stop scrolling. I’ve attempted to manipulate the answer here: Jquery Scrolling div – Prevent from entering site footer but with little success. Any clues?

#HTML Structure

<!DOCTYPE html>
<html>
<body>
    <div id="container">
        <div id="content-container">
            <script>
                $  ().ready(function() {
                    var $  scrollingDiv = $  ("#sidebar");

                    $  (window).scroll(function(){
                        var y = $  (this).scrollTop(),
                            maxY = $  ('#secondary-container').offset().top,
                            scrollHeight = $  scrollingDiv.height(),
                            offset = 30;

                        if(y< maxY-scrollHeight-offset ){
                            $  scrollingDiv
                            .stop()
                            .animate({"marginTop": ($  (window).scrollTop()+offset ) + "px"}, "slow" );
                        }
                    });
                });
            </script>

            <h1>header</h1>
            <div id="intro-text">
                <h3>Sub header</h3>
                <p>
                    Blah blah blah
                </p>
            </div>
            <div id="main-container">
                <div id="main">
<!-- Repeat x times -->
                    <div class="listing">
                        <p class="listing-description">
                            Blah
                        </p>
                        <p class="listing-response">
                            Blah
                        </p>
                        <br />
                        <a href="#">Linky</a>
                    </div>
<!-- End repeat -->
                </div>
                <div id="sidebar">
                    <h3>Floaty box content</h3>
                    Blah
                </div>
            </div>
            <div id="secondary-container">
                <div id="secondary-left">
                </div>
                <div id="secondary-right">
                </div>
            </div>
            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

# CSS

#container {
    padding:10px;
    margin:10px;
    margin:auto;
    width:1000px;
    overflow:auto;
}

.listing {
    margin-bottom:5px;
    position:relative;
    clear:both;
    overflow:auto;
    width:800px;
}

.listing-description {
    float:left;
    width: 49%;
    font-weight:bold;
}

.listing-response {
    float:left;
    width:50%;
    padding-left:5px;
}

#main-container {
    clear:both;
    overflow:auto;
}

#main {
    float:left;
}

#sidebar {
    float:left;
    padding-left:10px;
}

#secondary-container {
    clear:both;
    overflow:auto;
    border: 1px solid;
}

#secondary-left {
    width:50%;
    float:left;
}

#secondary-right {
    width:50%;
    float:left;
}

newest questions tagged jquery – Stack Overflow

Tags: , , , , ,

About Admin