Com as repostas que obtive de Mathias e seguida de Tobias Mesquita, antes da sua nova edição.
Cheguei a duas alternativa similares, acredito que seja Cross-Browser.
1.ª_Alternativa
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
body {
height: 999px;
}
#Pai {
position: relative;
width: 200px;
height: 200px;
border: 3px solid blue;
text-align: center;
overflow: auto;
}
#Filho {
width: 100px;
height: 100px;
margin-left: -50px;
/* metade da largura */
margin-top: -50px;
/* metade da altura */
position: absolute;
top: 50% ;
left: 50% ;
background: tomato;
z-index: 1;
opacity: .80;
}
</style>
</head>
<body>
<center>
<div id='Pai' onscroll = "rolamento()">
<p>Elemento A</p>
<p>Elemento B</p>
<p>Elemento C</p>
<p>Elemento D</p>
<p>Elemento E</p>
<p>Elemento F</p>
<p>Elemento G</p>
<p>Elemento H</p>
<p>Elemento I</p>
<p>Elemento J</p>
<div id='Filho'></div>
</div>
</center>
<script type="text/javascript">
var A = document.getElementById('Pai');
var B = document.getElementById('Filho');
var rolamento = function() {
var centralizado = A.scrollTop + 100;
B.style.top = centralizado;
}
A.onscroll = rolamento;
</script>
</body>
</html>
Segue Explicação
var A = document.getElementById('Pai'); // Div(primária)
var B = document.getElementById('Filho'); // Div(secundária)
var rolamento = function() {
var centralizado = A.scrollTop + 100; // Aqui definimos o valor 100 para reposicionar a Div(secundária) conforme o valor scrollTop() da Div(primária)
B.style.top = centralizado; // Agora vamos automatizar a Div(secundária), para retomar sempre a mesma posição inicial
}
A.onscroll = rolamento; // Escuta o evento da barra de rolagem lateral e dispara a função
NOTA - "Esta 1.ª_Alternativa funcionou perfeitamente no Computador local, mas não teve o mesmo desfeixo quando tentei adicionar como amostra no http://jsbin.com/ e http://jsfiddle.net/. No entanto o Script em si, funciona, estando abaixo do </body>
. Qualquer coisa que venha a ser, a causa, é de natureza desconhecida por mim."
2.ª_Alternativa
var A = document.getElementById('Pai'); // Div(primária)
var B = document.getElementById('Filho'); // Div(secundária)
var P = B.scrollHeight / 2;
A.onscroll = new Function("if(B.style.top = A.scrollTop + P + 'px') return true");
body {
height: 999px;
}
#Pai {
position: relative;
width: 200px;
height: 200px;
border: 3px solid blue;
text-align: center;
overflow: auto;
}
#Filho {
position: absolute;
width: 100px;
height: 100px;
top: 25%;
left: 25%;
margin: 0 auto;
background: tomato;
}
<center>
<div id='Pai'>
<p>Elemento A</p>
<p>Elemento B</p>
<p>Elemento C</p>
<p>Elemento D</p>
<p>Elemento E</p>
<p>Elemento F</p>
<p>Elemento G</p>
<p>Elemento H</p>
<p>Elemento I</p>
<p>Elemento J</p>
<div id='Filho'></div>
</div>
</center>
JSbin - Amostra externa
Explicando
var P = B.scrollHeight / 2;
Estou fazendo a divisão da div
(secundária), por seu Tamanho real, ou seja:
Tam.: 100 ÷ 2 = 50
Guardamos esse valor(50) na variável P e lançamos na condição if
.
A.onscroll = new Function("
if(B.style.top = A.scrollTop + P) return true
");
Logo o scroll
que esta ligado ao elemento div
(primária), for deslizado
A cada "1px" será chamado a new Function()
para a execução
Que seguido da condição if
, entra em ação pela sua posição
E num piscar de olhos retorna true
(reposicionamento realizado).
Pronto!
position:absolute;
paraposition:fixed;
não serve para o seu caso?