pink if scroll horiz, green if scroll vert

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


.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

// change div to pink if scroll horiz, green if scroll vert 
// with possible multiple attributes
// only horiz works on ie8, vertical is broken

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;
    
    var header = document.getElementById("header");
    var footer = document.getElementById("footer");
    var tabs = document.getElementById("tabs");
    
    function changeXElement(id) {
      var el = document.getElementById(id);
      el.style.background = "#ff0099";
      //add another style
    } 
    
    function changeYElement(id) {
      var el = document.getElementById(id);
      el.style.background = "#8cc428";
      // add another style
    } 

    if( diffX !==0 ) {
        // Scrolling horizontally
        changeXElement('header');
        changeXElement('footer');
        changeXElement('tabs');
        
    } else if( diffY !==0 ) {
        // Scrolling vertically
        changeYElement('header');
        changeYElement('footer');
        changeYElement('tabs');
        
    } else {
        // First scroll event
    }
    scrollFunc.x = window.pageXOffset;
    scrollFunc.y = window.pageYOffset;
}

window.onscroll=scrollFunc