jQuery - DIV to move with scrolling motion and stick position to top and bottom of window

Question

There may be already a jQuery plugin which can achieve this, but I can't find one to do exactly what I'm after. If there is, just point me to the tutorial, thanks.

My problem I have is that I have very long page content, and my sidebar is not visible when you are scrolled near the bottom of the page.

So I would like to make my #sidebar div to stick to the top and bottom of my browser window as you scroll up and down the page.

My sidebar height is longer than your typical screen resolution, so I need the bottom of sidebar to sticky to the bottom of the browser window as well as the top of the browser.

So as you begin to scroll down, the side bar will scroll like normal, but when you reach the end the sidebar, it sticks and will not scroll, and as you begin to scroll up, the sidebar will follow until the top of sidebar reaches the browser, then it sticks. Vice Versa.

Is this possible?

I have created a jsfiddle of simple design layout which is central. I have added a dotted border to the sidebar so you now where the sidebar should stick.

http://jsfiddle.net/motocomdigital/7ey9g/5/

Any advice, or you know a online tutorial or demo, would most awesome!

---

UPDATE

Please see this attempt by @Darek Rossman

http://jsfiddle.net/dKDJz/4/

He's got the basic idea working. But the scrolling up, causes it to snap to the top. I need the sidebar to be fluid with the scrolling up/down motion. But sticking to the either the top or bottom of the window. It should also not be fixed positioned when the header/footer are in viewport, so it does not overlay.

Thanks

Answer 1

I have updated the jsfiddle with my solution.

var $sidebar = $("#sidebar"),
    $window = $(window),
    sidebartop = $("#sidebar").position().top;

$window.scroll(function() {

    if ($window.height() > $sidebar.height()) {
        $sidebar.removeClass('fixedBtm');
        if($sidebar.offset().top <= $window.scrollTop() && sidebartop <= $window.scrollTop()) {
            $sidebar.addClass('fixedTop');        
        } else {
            $sidebar.removeClass('fixedTop');
        }
    } else {
        $sidebar.removeClass('fixedTop');
        if ($window.height() + $window.scrollTop() > $sidebar.offset().top + $sidebar.height()+20) {
            $sidebar.addClass('fixedBtm');    
        }
                   
        if ($sidebar.offset().top < 0) {
            $sidebar.removeClass('fixedBtm');   
        }
    }
    
});

h1, h2 {
    display: block;
    font-weight: bold;
}

#horizon {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #cccccc;
    overflow: hidden;    
}

#header, #footer {
    width: 480px;
    height: auto;
    overflow: hidden;
    background: teal;
    padding: 10px;
    color: #ffffff;
}

#wrapper {
    width: 500px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
}

#content-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden:
}

#content {
    width: 330px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    padding: 10px;
}

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
}

.fixedBtm {
    margin-left: 350px !important;
    position: fixed;
    bottom: 0;   
}

.fixedTop {
    margin-left: 350px !important;
    position: fixed;
    top: 0;   
}

.post {
    margin: 5px;
    width: 320px;
    background: red;
    float: none;
    overflow: hidden;
    min-height: 175px
}

.buttons li {
    margin: 5px;
    width: 120px;
    background: blue;
    float: none;
    overflow: hidden;
    min-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}

.buttons li:hover {
    background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="horizon">

    <div id="wrapper">
        
        <div id="header">header</div>
        
        <div id="content-wrapper">
        
            <div id="content">
            
                <h1>Latest Posts</h1>
            
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
                <div class="post">This is a post</div>
            
            </div>
        
            <div id="sidebar">
            
                <h2>Sidebar</h2>
            
                <ul class="buttons">
                    <li>Button 1</li>
                    <li>Button 2</li>
                    <li>Button 3</li>
                    <li>Button 4</li>
                    <li>Button 5</li>
                    <li>Button 6</li>
                    <li>Button 7</li>
                    <li>Button 8</li>
                    <li>Button 9</li>
                
                    <li>Button 10</li>
                    <li>Button 11</li>
                    <li>Button 12</li>
                    <li>Button 13</li>
                    <li>Button 14</li>
                    <li>Button 15</li>
                    <li>Button 16</li>
                    <li>Button 17</li>
                    <li>Button 18</li>
                </ul>
        
            </div>
                
        </div>
        
        <div id="footer">footer</div>
        
    </div>
    
</div>

The sidebar should remain in place at the top when the window is larger than the sidebar and fix to the bottom when the sidebar is larger.

Answer 2

You don't need any jQuery or javascript for this. All of this can be achieved in CSS with position: fixed.

Change your sidebar selector to the following

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
    position: fixed;
    right: 35px;
}