style - jquery get class value

jQuery acordeón, desplazar el inicio de la pestaña presionada hacia arriba, ¿no funciona si la pestaña expandida está por encima de la que se hace clic?

Question

Tengo un pequeño problema al hacer que mi acordeón jquery haga lo que quiero.

Siempre quiero que la pestaña en la que se hace clic se desplaza a una cantidad fija de píxeles desde la parte superior de la página, y lo hago funcionar. Pero cada vez que la pestaña activa está por encima de la pestaña en la que se hace clic y si la página ya se desplazó un poco hacia abajo, la parte superior y partes del contenido de la pestaña en la que se hizo clic se desplazan hacia arriba pasando la parte superior de la página.

Esto es lo que conseguí:

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300
    });
    $(''#accordion h3'').bind(''click'',function(){
        theOffset = $(this).offset();
        $(''body,html'').animate({ 
            scrollTop: theOffset.top - 100 
        });
    });
});

Aquí hay un violín para ilustrar mi problema,

Por ejemplo, tiene "sección 2" expandida, desplácese hacia abajo y haga clic en la pestaña "sección 3" y todo se desplaza fuera de la página, aunque funciona de otra manera.

Y si cierra la pestaña activa antes de abrir una nueva, también funciona bien, así que supongo que tiene algo que ver con la altura de la pestaña que se desploma y que estropea la función de desplazamiento hacia arriba.

Espero que alguien pueda ayudar, probablemente me acerque a esto de la manera incorrecta. ¡Realmente no sé lo que estoy haciendo en realidad ya que mis habilidades de jquery están limitadas a una comprensión básica de cortar y pegar! ^^

¡Gracias de antemano y toda la ayuda y punteros son más que bienvenidos! :)

Aclamaciones

Answer 1

Sí, es la altura de la pestaña que se cierra esa es la causa del problema.

La parte superior de la h3 cliqueada cambia inmediatamente después debido al colapso de una pestaña encima.

Una solución alternativa (una mala quizás) es activar la animación de desplazamiento después de que termina la animación de colapso, es decir, si la animación de colapso se establece en 300 ms, comience la animación de desplazamiento después de 310 ms o algo así.

$(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300 // collapse will take 300ms
        });
        $(''#accordion h3'').bind(''click'',function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $(''body,html'').animate({ scrollTop: theOffset.top - 100 });
            }, 310); // ensure the collapse animation is done
        });
});

Fiddle actualizado

Answer 2

Puede agregar una función activada al acordeón. De esta forma se desencadena una vez que las otras animaciones de mostrar / ocultar se hayan completado.

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300,
        activate: function(event, ui) {
            try {
                theOffset = ui.newHeader.offset();
                $(''body,html'').animate({ 
                    scrollTop: theOffset.top 
                });
            } catch(err){}
        }
    });
});

se requiere la captura de prueba ya que ui.newHeader no está definido si está contrayendo una pestaña de acordeón abierto.