Q:

Header overlaps the sticky box when scroll

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:
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />

        <title>LOAI Design Studio</title>
        <meta name="description" content="LOAI Design studio"/>
        <meta name="keywords" content="">

        <meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />

        <link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/core.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/fixes.css">
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="../assets/css/tablets-portrait.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="../assets/css/phone.css"/>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <!--Header--><header>
            <div id="headerWrapper">
                <div id="headerContent">

                    <div id="headerLogo">
                        <a href="../index.html"><img alt="loai design studio logo" src="../assets/elements/logo.png"/></a>
                    </div>

                    <nav><ul id="mainMenu" class="snapjs-expand-left">
                        <li><a href="../index.html">Home</a></li>
                        <li><a href="../portfolio.html">Portfolio</a>
                        <li><a href="../about.html">About Me</a></li>
                        <li><a href="../contact.html">Contact Me</a></li>
                        <li><a href="../blog.html">Blog</a></li>
                    </ul></nav>

                </div>
            </div>
        </header>

        <!--Website Content--><div id="Page">       

            <div id="secondHeader">
                <a class="secondHeader-menuButton" href="#">Menu</a>
                <p id="logo-smallScreen">LOAI Design Studio</p>
            </div>

            <div class="wrapperB">
                <div id="portfolio-projectPage" class="content">

                    <div class="imagesGrid">    

                    <p>Logo</p>
                    <img alt="Ambition World Logo Design" src="images/ambition-world-logo-mockup.jpg">

                    <p>Business Card &amp; a Mug Mockup</p>
                    <img alt="Ambition World Business Card Design" src="images/ambition-world-bussiness-card-mockup.jpg">       

                    </div><div class="detailsBox">

                        <h3>Ambition World General Trading </h3>
                        <p>This Logo and business card designed for my Dad's Dubai based company.</p>

                        <p><strong>Skills:</strong> Graphic Design</p>
                        <p><strong>Date:</strong> 2013</p>
                        <p class="shareButtons"><strong>Share This Project On:</strong>  
                        <a href="http://facebook.com/LOAI.Design.Studio" 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;"><span>Facebook</span></a>    
                        <a href="https://twitter.com/share" class="twitter" target="_blank"><span>Twitter</span></a></p>

                        <div>
                            <a onclick="history.go(-1);">Go Back</a>
                            <a href="#">Next Project</a>
                            <a class="scrollup">Go Up</a>   
                        </div>

                    </div>
                </div>
            </div>

            <!--Footer Section--><footer>
            <div id="footer-sectionA">
                <div class="footerContent">
                    <h3><strong>Want to get started?</strong></h3>
                    <p>I offer free, no-obligation consultation, will review your project <br> &amp; discuss ways to achieve your goals within your budget &amp; time frame.</p>
                    <p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&amp;s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&amp;v=1afd868e">Schedule an Appointment Now</a></p>
                </div>
            </div>          
            <div id="footer-sectionB">
                <div class="footerContent">
                    <p>Copyright ©2012 LOAI Design Studio. <br> All rights reserved.<a href="../terms-and-conditions.html">Terms &amp; Conditions.</a></p>
                </div>
            </div>
            </footer>
        </div><!--The End Of The Page-->

        <!--Scripts Links-->
        <script type="text/javascript" src="../assets/libraries/jquery.js"></script>
        <script type="text/javascript" src="../assets/js/slider.js"></script>
        <script type="text/javascript" src="../assets/js/main.js"></script>
        <script src="../assets/libraries/modernizr.js"></script>
        <!--GoSquared Scripts-->
        <script type="text/javascript">
          var GoSquared = {acct: "GSN-035800-K"};
          (function(w){
            function gs(){
              w._gstc_lt = +new Date;
              var d = document, g = d.createElement("script");
              g.type = "text/javascript";
              g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js";
              var s = d.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(g, s);
            }
            w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
          })(window);
        </script>

    </body>
</html>

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

A:

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

