Header overlaps the sticky box when scroll

Question

I want to have a Sidebar that sticks on the window when you scroll but stop scrolling when it hits the footer. I have managed to get it working to a good level, it's only a small problem that I can't seem to be able to solve.

Test it live here: http://meeped.co.uk:93/portfolio/ambition-world.html

everything is fine until you scroll, the sidebar sticks to the top of the page hidden behind the fixed header as well. How to make it not hidden behind the Header? and to be position to the right place? also is there anyway we can Animate it so it is a bit smooth?

Here is the HTML:




    
        

        LOAI Design Studio
        
        

        

        
        
        
        
        
        
        
    

    
        
            
                

                    
                        
                    

                    
                        Home
                        Portfolio
                        
About Me
                        Contact Me
                        Blog
                    

                
            
        

               

            
                Menu
                LOAI Design Studio
            

            
                

                        

                    Logo
                    

                    Business Card & a Mug Mockup
                           

                    


                        Ambition World General Trading 
                        This Logo and business card designed for my Dad's Dubai based company.

                        Skills: Graphic Design
                        Date: 2013
                        Share This Project On:  
                        Facebook    
                        Twitter

                        
                            Go Back
                            Next Project
                            Go Up   
                        


                    
                
            

            
            
                
                    Want to get started?
                    I offer free, no-obligation consultation, will review your project 
 & discuss ways to achieve your goals within your budget & time frame.
                    Schedule an Appointment Now
                
                      
            
                
                    Copyright ©2012 LOAI Design Studio. 
 All rights reserved.Terms & Conditions.

The CSS:

/*Portoflio Project Page*/
#portfolio-projectPage{
    text-align: left;
    position: relative;
}

.imagesGrid, .detailsBox  {
    display: inline-block;
    vertical-align: top;
}

.imagesGrid {
        width: 65%;
    }

    .imagesGrid img{
        border: 1px solid #E8E8E8;
        margin-bottom: 10px;
    }                                           

    .imagesGrid p {
        border-top: 1px solid #E8E8E8;
        padding-top: 8px;
        margin: 10px 0;
    }   

    .imagesGrid p:first-of-type {
        border-top: none;
        padding: 0 0 10px 0;
        margin: 0;
    }   

.detailsBox {
        width: 347px;
        position: fixed;
        margin-top: 28px;
        padding-left: 30px;
    }

    .detailsBox p {
        border-bottom: 1px solid #E8E8E8;
        padding-bottom: 10px;
        margin: 10px 0;
    }   

    .detailsBox p, h3 {
        vertical-align: bottom;
    }

    .detailsBox a {
        vertical-align: middle;
    }       

    .detailsBox p:last-of-type {
        border-bottom: 3px solid #E8E8E8;
        margin: 0;
    }   

    .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: #E8E8E8;
        padding: 10px 14px;
        cursor: pointer;

        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    .detailsBox div a:hover{
        color: #FFFFFF;
        background-color: #456087;
    }

    .detailsBox div br {
        display: none;
    }

    .shareButtons a {
            margin-left: 3px;

            -moz-transition: none;
            -ms-transition: none;
            -o-transition: none;
            transition: none;
        }

    .shareButtons a span {
            display: none;
        }

And Finally The JavaScript bit:

$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $StickyBox= $('.detailsBox');
    var $window = $(window);

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $StickyBox.height() - 10;
        var visibleFoot = 255 - $window.scrollBottom();
        var scrollTop = $window.scrollTop();

        if(scrollTop < "auto" + 10){
            $StickyBox.css({
                top: (200 - scrollTop) + "px",
                bottom: "auto"
            });
        }else if (visibleFoot > gap) {
            $StickyBox.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $StickyBox.css({
                top: 0,
                bottom: "auto"
            });
        }
    });

Brewal · Accepted Answer

Your if(scrollTop < "auto" + 10) will always return false as "auto" + 10 is a string.
Replace this :

if(scrollTop < "auto" + 10){
    $StickyBox.css({
        top: (200 - scrollTop) + "px",
        bottom: "auto"
    });
}

by this :

if(scrollTop < 80){
    $StinkyBox.css({
        top: (130 - scrollTop) + "px",
        bottom: "auto"
    });
}

I changed the values to get the desired behaviour.

Also, in your last condition, make it top: 80 to be below the header :

else {
    $StinkyBox.css({
        top: 80,
        bottom: "auto"
    });
}

Edit : enhanced code

var gap = $window.height() - $StinkyBox.height() - 10;
var visibleFoot = 255 - $window.scrollBottom();
var scrollTop = $window.scrollTop();

if(scrollTop < 50){
    $StinkyBox.css({
        top: (130 - scrollTop) + "px",
        bottom: "auto"
    });
}else if (visibleFoot > gap - 100) {
    $StinkyBox.css({
        top: "auto",
        bottom: visibleFoot + "px"
    });
} else {
    $StinkyBox.css({
        top: 80,
        bottom: "auto"
    });
}

Header overlaps the sticky box when scroll

Answers (2)

Related Questions