Cabecera flotante

scripts.js

/** Cambia de cabecera */
var trasweb =  {};

trasweb.cabecera = function(slayer){
    this.ALTURA_HACER_FLOTANTE_MENU = 400;
    this.cabecera =  document.getElementById(slayer);


     this.getScroll = function () {
        if (window.pageYOffset !== undefined) {
            return [pageXOffset, pageYOffset];
        }
        else {
            var sx, sy, d = document, r = d.documentElement, b = d.body;
            sx = r.scrollLeft || b.scrollLeft || 0;
            sy = r.scrollTop || b.scrollTop || 0;
            return [sx, sy];
        }

    };

    this.flotante = function () {
        var position = this.getScroll();

        if (position[1] > this.ALTURA_HACER_FLOTANTE_MENU) {
            this.cabecera.classList.add('flotante');
        } else {
            this.cabecera.classList.remove('flotante');
        }
    };

    window.onscroll= function() {
        this.flotante();
    }.bind(this);

};

/** ... **/

document.addEventListener('DOMContentLoaded', function(){

    /* ---- Menú principal flotante --- */
    var cabecera = new trasweb.cabecera('cabecera');
    cabecera.flotante();



});

styles.css

#cabecera.flotante {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    right: 0;
    margin: 0 auto;
    background-color: #79b2d0;
    z-index: 2000000010;
    padding: 10px 0 0 10px;
}

#cabecera.flotante #logo {
    margin: 10px 0 0 10px;
}