detect scroll direction, assign classname

up, down, left, right

HTML

<body> 
    <div id="container">
        <div id="header" class="header">
            header
        </div>
        <div id="tabs" class="tabs">tabs tabs tabs</div>
        <div class="clear"></div>
        <div class="content" id="content">
            <center>
            <div id="left" class="dir">left</div>
            <div id="right" class="dir">right</div>
            <div id="up" class="dir">up</div>
            <div id="down" class="dir">down</div>
            </center>
            
            <p>content (dynamic) loads after other elements and is sometimes wider; want header, tabs and footer to be fixed left to viewport (always visible) but not fixed vertically in the viewport. Can't do it with CSS alone due to limitations with footer - in the real app, it must be sticky and this messes up CSS possibilities.</p>
            <p>Any way to use the pink box (which I can bury with z-index) to make the x-position of the other divs behave the same? </p>
        </div>
        <div id="footer" class="footer">
            footer
        </div>
    </div> 
    <div id="helper" class="helper">can this help?</div>    
</body>

CSS

#header, 
#footer,
#tabs {
    position: relative;
        -moz-transition: all 0.1s linear 0s;
        -webkit-transition: all 0.1s linear 0s;
        transition: all 0.1s linear 0s;
}

.dir, .showdir {
    background: #eeeeee;
    color: #ff0099;
    padding: 5px;
    display: none;    
}

.showdir {
    display: inline-block;
}

.header {
  padding: 5px;
  background: #eaeaea; 
  text-align: center;    
}

.header, .footer{
   color: #068dc8;
   font-weight: bold;
   padding-left: 1em;
}

.tabs {
   margin: 10px 0 0 0;
   padding: .5em 1em;
   width: 30%;
   display: inline-block;
   float: left;
   background: #aaaaaa;   
}

.clear {
    clear: both;   
}

.content {
     padding: 2em 1em;
     margin: 1 0 1em 0;
     width: 120%;
     border: 1px dashed #cccccc;   
}

.content p {
     margin-bottom: 1em;   
     width: 60%;   
}

.footer {
   background: #eeeeee;   
}

.helper {
    color: #ffffff;
    position: fixed;
       left: 0px;
       top: 0px;   
      display: inline;   
    background: #ff0099;    
}
body{
    overflow:hidden;
}

JavaScript

// detect scroll direction, assign classname
// up, down, left, right

function scrollFunc(e) {
    if ( typeof scrollFunc.x == 'undefined' ) {
        scrollFunc.x = window.pageXOffset;
        scrollFunc.y = window.pageYOffset;
    }
    var diffX = scrollFunc.x - window.pageXOffset;
    var diffY = scrollFunc.y - window.pageYOffset;

    if( diffX<0 ) {
        // Scroll right
        document.getElementById("right").className = 'showdir';
        document.getElementById("left").className = 'dir';
        document.getElementById("up").className = 'dir';
        document.getElementById("down").className = 'dir';
 
        
    } else if( diffX>0 ) {
        // Scroll left
        document.getElementById("left").className = 'showdir';
        document.getElementById("right").className = 'dir';
        document.getElementById("up").className = 'dir';
        document.getElementById("down").className = 'dir';
 
        
    } else if( diffY<0 ) {
        // Scroll down
        document.getElementById("down").className = 'showdir';
        document.getElementById("left").className = 'dir';
        document.getElementById("up").className = 'dir';
        document.getElementById("right").className = 'dir';
 
        
    } else if( diffY>0 ) {
        // Scroll up
        document.getElementById("up").className = 'showdir';
        document.getElementById("left").className = 'dir';
        document.getElementById("right").className = 'dir';
        document.getElementById("down").className = 'dir';
 
        
    } else {
        // First scroll event
    }
    scrollFunc.x = window.pageXOffset;
    scrollFunc.y = window.pageYOffset;
}
window.onscroll=scrollFunc