4

Tenho uma div primária, e dentro desta, outra div(secundária).

Estou tentando posicionar a div secundária na div primária de modo que, torne uma DIV flutuante(estilo popup) que sobreponha aos demais elementos.

Mas para este caso em especial, quero fazer sobrepor ao conteúdo da div principal e ao rolar o Scroll a div filho deve acompanhar.

Segue abaixo o código.

#Pai {
    position: relative;
    width: 400px;
	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; // sobrepor
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}
<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>

Teria como desenvolver um Script para conseguir este efeito, sem que precise alterar toda sintaxe do CSS?

Por exemplo

var scrolldellay = document.getElementById("Pai");

   scrolldellay.scrollBy = function() {
                  ...
    // Coloque a rotina implementada
                  ...
 }
1
  • Modificando o position:absolute; para position:fixed; não serve para o seu caso?
    – Chun
    4/04/2017 às 8:06

3 Respostas 3

2

Como o amigo @Cʜᴜɴ comentou, apenas alterando de position:absolute; para position:fixed; a div central(vermelha) se mantem fixa, e alterei a posição(top,left) p/ manter ela no centro.

#Pai {
    position: relative;
    width: 400px;
	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: fixed; /* alterei aqui */
	top: 30% ; /* alterei aqui */
	left: 200px ; /* alterei aqui */
	background: tomato;
	z-index: 1; // sobrepor
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}
<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>

Um script sem precisar alterar o css, utilizando jquery

$("#Pai").scroll(function() {
  console.log($("#Pai").scrollTop());
  $("#Filho").css("top", $("#Pai").scrollTop() + 100);
});

Utilizando o mesmo exemplo, agora a div filho é reposicionada conforme o valor do .scrollTop() da div pai, que retorna a posição vertical atual da barra de rolagem, coloquei +100 simplesmente p/ manter centralizada, tu pode alterar o valor tranquilamente p/ ver como se comporta, nota que ao scrollar o body não afeta a posição da div filho.

Demo - jquery

5
  • @DiegoHenrique, 3 linhas somente no css, ta comentado no código =)
    – Mathiasfc
    4/04/2017 às 11:04
  • Um elemento fixo - fixed - é posicionado relativamente ao "viewport", isso significa que ele sempre ficará no mesmo lugar mesmo que haja rolagem na página. Um detalhe aqui é quando um elemento recebe position:fixed, ele fica livre/independente não somente do seu parente, mas do documento como um todo. Ou seja o elemento position:fixed se mantém sempre fixo à janela e não ao elemento em que ele está inserido. Me parece que temos de setar os valores das propriedades top e left em "pixel" e utilizar o elemento fixo - fixed. 4/04/2017 às 11:30
  • O elemento position:fixed não se adequa muito bem à minha necessidade, o position que melhor se adequaria seria o position:absolute. Mas sua resposta ja ta valendo. =) 4/04/2017 às 11:33
  • Realmente, se o elemento pai da div pai possuir scroll a div central(filho) vai acompanhar o scroll, p/ esse caso acho que seria interessante colocar uma função $("#Pai").scroll(function() {..}); que ao scrollar a div pai, movimentar a div filho, com position:absolute; obviamente, se tu achar necessário posso implementar na resposta.
    – Mathiasfc
    4/04/2017 às 11:40
  • @DiegoHenrique, da uma olhada aqui: jsfiddle.net/mathiasfcx/sac5sL3u peguei o mesmo exemplo, coloquei position:abosulte na div filho e uma função na div pai, que ao scrollar a div pai a div filho é reposicionada conforme o valor do .scrollTop(); que retorna a posição vertical atual da barra de rolagem, coloquei +100 simplesmente para centralizada, tu pode alterar o valor tranquilamente p/ ver como se comporta,coloquei um body com scroll p/ mostrar que o scroll não vai afetar a div filho, qualquer duvida só chamar.
    – Mathiasfc
    4/04/2017 às 11:54
1

você pode usar o evento scroll como mencionou, porém o valor do top deve levar em consideração os 50% iniciais.

Abaixo segue um exemplo.

Modernizr.addTest('csscalc', function() {
    var prop = 'width:';
    var value = 'calc(10px);';
    var el = document.createElement('div');
    el.style.cssText = prop + Modernizr._prefixes.join(value + prop);
    return !!el.style.length;
});

Modernizr.addTest('mozcsscalc', function() {
    var prop = 'width:';
    var value = '-moz-calc(10px);';
    var el = document.createElement('div');
    el.style.cssText = prop + Modernizr._prefixes.join(value + prop);
    return !!el.style.length;
});


var pai = document.getElementById("Pai");
var filho = document.getElementById("Filho");
pai.addEventListener("scroll", function (e) {
  if (Modernizr.csscalc) {
    filho.style.top = "calc(50% + " + pai.scrollTop + "px)"
  } else if (Modernizr.mozcsscalc) {
    filho.style.top = "-moz-calc(50% + " + pai.scrollTop + "px)"
  }
});
#Pai {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid blue;
  text-align: center;
  overflow: auto;
}

#Filho {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background: tomato;
  z-index: 1; // sobrepor
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity = 80);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<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>

P.S.: você não precisa de uma margem negativa para ajustar a posição da div, para tal você pode usar um translate de -50%.

5
  • Estou a utilizar um Firefox 11 numa plataforma DLinux, e não rolou. Em qual Navegador desenvolveu? 4/04/2017 às 12:48
  • Estou utilizando o Opera 4/04/2017 às 12:59
  • 1
    @DiegoHenrique qual a necessidade de utilizar um Navegador que foi lançado a 5 anos e não tem mais suporte por parte da Mozilla? 4/04/2017 às 13:04
  • 1
    @DiegoHenrique adicionei um fallback para o Mozilla 11, mas aconselho que atualize o seu browser, ou pelo menos avise que esta usando um Browser pré-histórico na hora de fazer a pergunta. 4/04/2017 às 13:15
  • Bom, Linux são robusto, mas quando ha necessidade de instalar seus pacotes, muita das vezes ocorre alguns conflito entre bibliotecas. Ai começa a correria pra solucionar, pois em muitos caso temos que compilar tudo na unha. Mas tenho o Slax com Firefox 38, e sei que o Firefox ja esta na sua versão 52+ . Mas para cada nova atualização requer na maioria das vezes uma nova máquina. Infelizmente não é somente eu, mas ha outros usuários sem PC novos, ainda mais na crise. E pensando assim, gosto de programar tudo portável, semântica amplamente compatível com os mais de 40 navegadores 4/04/2017 às 13:16
0

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!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .