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.

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;
}

    

        
        
header
        
        

        
            

            
                
Latest Posts
            
                
This is a post
                
This is a post
                
This is a post
                
This is a post
                
This is a post
                
This is a post
                
This is a post
                
This is a post
                
This is a post
                
This is a post
            
            
        
            

            
                
Sidebar
            
                

                    
Button 1
                    
Button 2
                    
Button 3
                    
Button 4
                    
Button 5
                    
Button 6
                    
Button 7
                    
Button 8
                    
Button 9
                
                    
Button 10
                    
Button 11
                    
Button 12
                    
Button 13
                    
Button 14
                    
Button 15
                    
Button 16
                    
Button 17
                    
Button 18
                
        
            
                
        
        
        
footer
        
    
    

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.