fix div y position after scroll

by Deborah

HTML

<div class="header">header</div>
<div class="clearit"></div>
<div class="wrapper">
    <div id="center" class="center">
        <div class="inner">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
    </div>
</div>    
    <div id="left" class="left">
           <div class="inner">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis...

CSS

body {
    margin:0;
    padding:0;
}

.header {
  text-align: center;   
  background-color: aqua;
  height: 200px;
}

.clearit {
    clear: both;   
}

.wrapper {
    position: relative;
    float: left;
    width: 100%;
}

.center {
    min-width: 100px;
    margin: 0 300px 0 220px; 
    background-color: blue;
}

.left {
    position: relative;
    float: left;
    width: 220px; 
    margin-left: -100%;
    background-color: red;
}

.sidebar {
    float: left;
    width: 300px; 
    margin-left: -300px; 
    background-color: green;
}

.inner {
    margin: 0 10px;
    padding: 10px 0;
}

JavaScript

function fixTop() {
    // get scroll distance
    function getScrollY() {
        var y = 0;
        if( typeof ( window.pageYOffset ) == 'number' ) {
            y = window.pageYOffset;
        } else if ( document.body && ( document.body.scrollTop) ) {
            y = document.body.scrollTop;
        } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
            y = document.documentElement.scrollTop;
        }
        return [y];
    }  

    var y = getScrollY();
    var y = y[0];
    
    // tell it which element has to scroll, then stick
    var fixMe = document.getElementById('left' );
    
    // measure distance and fix it at the correct scroll position  
    function getYset() {
        
        // tell it how far it has to go before fixing
        var scrollToHere = 200;
        
        // check where it is and provide the style.top value
        if (y > scrollToHere) {
            ySet = y - scrollToHere;
            return [ySet];
        } else {
            ySet = 0;
            return [ySet];
        }
    }
        
    var ySet = getYset();
    var ySet = ySet[0];

    //  set the style.top according to the calculations above
    fixMe.style.top = ySet + "px";
}

// run the function when user scrolls
window.onscroll = function() {
    fixTop();
}