cross browser scroll detection - change div based on direction

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

// all browsers plus ie8

function scrollFunc(e) {

    function getMethod() {
         var x = 0, y = 0;
         if ( typeof( window.pageYOffset ) == 'number' ) {
              x = window.pageXOffset;
              y = window.pageYOffset;
         } 
    
         else if( document.body && (document.body.scrollLeft || document.body.scrollTop ) ) {
              x = document.body.scrollLeft;
              y = document.body.scrollTop;
         } 
    
         else if( document.documentElement && (document.documentElement.scrollLeft ||     document.documentElement.scrollTop ) ) {
              x = document.documentElement.scrollLeft;
              y = document.documentElement.scrollTop;
         }
    
          return [x, y];
    }
            
     var xy = getMethod();            
     var xMethod = xy[0];           
     var yMethod = xy[1];

    if ( typeof scrollFunc.x == 'undefined' ) {
        scrollFunc.x = xMethod;
        scrollFunc.y = yMethod;
    }
    
    var diffX = scrollFunc.x - xMethod;
    var diffY = scrollFunc.y - yMethod;
    
    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 = xMethod;
    scrollFunc.y =...