En realidad habría que ver el código relativo a los h4 y a las secciones. De todas no te había entendido bien antes, ahora creo que si.
Pues en lo referente a CSS, tendría que poner a ese h4 una vez seleccionado una posición fija. Lo ideal, supongo, sería que le añadieras una clase mediante JavaScript a dicho elemento solo cuando esté seleccionado y el scroll llegue a donde está situado para luego ponerle una posición fija.
Primero le añades una clase para marcar el h4 como seleccionado —tal vez el plugin de jQuery ya lo haga, fíajte en el HTML que genera:
Código Javascript
:
Ver original$("h4.accordion" ).click.().addClass('selecciomado');
Luego creas una variable en JavaScript para saber la distancia del h4 seleccionado a la parte de arriba. Y añades un listener para que en el caso de que al hacer scroll la posición llegue hasta el h4 seleccionado, se añada otra clase mas.
Código Javascript
:
Ver originalvar titulo = $('h4.accordion.selecciomado')
var top = titulo.offset().top - parseFloat(titulo.css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
titulo.addClass('fijado');
} else {
titulo.removeClass('fijado');
}
});
Y en tu CSS creas esa clase .fijado:
Código CSS:
Ver originalh4.accordion.selecciomado.fijado {
position: fixed;
top: 0;
}
En principio sino indicas left/right creo que debería de quedarse en el mismo sitio que está.
Ten en cuenta que al ponerlo como posición fija, tendrás que ajustar su tamaño y alguna que otra cosa. Tienes que ajustarlo todo para que quede tal cual necesites y, sobre todo, ser muy conciso para que el efecto quede del todo bien. Te lo comento porque si se hace bien queda muy bien, y si se deja algo queda un poco raro.