Centrar y fijar DIV con javascript

[ceaped]

Buenas noches
Encontre este forma de fijar una DIV con javascript:
http://www.harrycampaz.com/2014/02/c...ndo-damos.html

Funciona correctamente pero cuando muevo el scroll la DIV se me ubica en la esquina superior izquierda.

Intenté con esto pero sigue igual:

Código Javascript:

$('#piezas').css('margin','0','auto','0','auto');
 

¿Cómo hago para que se centre la DIV cuando mueva el scroll?

Gracias por su ayuda

[Alexis88]

Si quieres que el elemento quede centrado incluso cuando se mueve la barra de desplazamiento, tienes que trabajar con el evento scroll. Una forma efectiva de centrar elementos es la siguiente:

Código Javascript:

var elem = document.getElementById("id del elemento"), //El elemento
    elemWidth = elem.offsetWidth, //Ancho del elemento
    elemHeight = elem.offsetHeight, //Alto del elemento
    winWidth = window.innerWidth, //Ancho de la ventana
    winHeight = window.innerHeight, //Alto de la ventana
    winX = window.scrollX, //Cantidad desplazada horizontalmente (scroll)
    winY = window.scrollY; //Cantidad desplazada verticalmente (scroll)
        
elem.style.marginTop = (winHeight / 2 - elemHeight / 2) + winY + "px"; //Centrado vertical
elem.style.marginLeft = (winWidth / 2 - elemWidth / 2) + winX + "px"; //Centrado horizontal
 

Y para que tenga efecto tanto al cargar el documento como al producirse el scroll, hay que tener este script en una función que se ejecute cuando se produzcan los eventos DOMContentLoaded (carga del DOM) y scroll:

Código Javascript:

function centrar(){
    var elem = document.getElementById("id del elemento"), //El elemento
        elemWidth = elem.offsetWidth, //Ancho del elemento
        elemHeight = elem.offsetHeight, //Alto del elemento
        winWidth = window.innerWidth, //Ancho de la ventana
        winHeight = window.innerHeight, //Alto de la ventana
        winX = window.scrollX, //Cantidad desplazada horizontalmente (scroll)
        winY = window.scrollY; //Cantidad desplazada verticalmente (scroll)
        
    elem.style.marginTop = (winHeight / 2 - elemHeight / 2) + winY + "px"; //Centrado vertical
    elem.style.marginLeft = (winWidth / 2 - elemWidth / 2) + winX + "px"; //Centrado horizontal
}
 
document.addEventListener("DOMContentLoaded", centrar, false);
window.addEventListener("scroll", centrar, false);
 

DEMO

Un saludo

[ceaped]

Hola Alexis88
Mira el código que utilizo pues lo que yo busco es que la DIV se quede fija y cuando baje el scroll quede centrada:

Código Javascript:

$(function(){ // document ready
 
    if (!!$('#piezas').offset()) { // make sure ".sticky" element exists
    var stickyTop = $('#piezas').offset().top; // returns number 
    $(window).scroll(function(){ // scroll event
    var windowTop = $(window).scrollTop(); // returns number 
 
    if (stickyTop < windowTop){
    $('#piezas').css({ position: 'fixed', top: 0 });
    } else {
    $('#piezas').css('position','static');
    
    }
 
});
 
}
 
});
 

Yo pongo esto pero cuando bajo el scroll no me queda centrado

Código Javascript:

$('#piezas').css('margin','0','auto','0','auto');
 

Gracias por tu ayuda

[Alexis88]

Quizá porque debe ser 0 auto, sin comas de por medio.

[ceaped]

Hola Alexis88
No de ninguna de estas formas tampoco me lo centra al mover el scroll

Código Javascript:

$('#piezas').css('margin','0', 'auto');
 

Código Javascript:

$('#piezas').css('margin','0 auto');
 

[Alexis88]

¿Podrías mostrarnos en qué parte tienes eso exactamente? Solo el bloque de código en cuestión, no lo que no tenga que ver.

[ceaped]

Hola Alexis88
El el código lo puse arriba en el tercer post.

Gracias por tu ayuda

[Alexis88]

Me refiero al sector de tu código en el que has colocado esa línea.

[ceaped]

Hola Alexis88

En esta etiqueta

Código HTML:

<div id="piezas">
<div class="dragableBox" id="box1"><img src="images/pieza_13.png" alt="Título"></div>
<div class="dragableBox" id="box2"><img src="images/pieza_18.png" alt="Título"></div>
<div class="dragableBox" id="box3"><img src="images/pieza_10.png" alt="Título"></div>
</div>
 

Gracias por tu ayuda