horiz or vert scroll?

by Deborah

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="vertical" class="dir">vertical</div>
            <div id="horiz" class="dir">horiz</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>

        </div>
        <div id="footer" class="footer">
            footer
        </div>
    </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;   
}

JavaScript

// just detect if scroll is horiz or vertical

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("horiz").className = 'showdir';
        document.getElementById("vertical").className = 'dir';
        
    } else if( diffY !==0 ) {
        // Scroll down
        document.getElementById("vertical").className = 'showdir';
        document.getElementById("horiz").className = 'dir';
        
    } else {
        // First scroll event
    }
    scrollFunc.x = window.pageXOffset;
    scrollFunc.y = window.pageYOffset;
}

window.onscroll=scrollFunc