Posição de DIV de acordo com o Scroll

diogoleter · Fevereiro 11, 2008

Olá,

Tenho o seguinte exemplo: (Recomendo que baixe o código em um arquivo HTML e abra-o para entender melhor o problema)

<hmtl>
<head>
    <title>Trabalhando com DIVs</title>
<style>

#fundo{
    position: absolute;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity: 0.6;
    z-index: 10;    
    filter: alpha(opacity = 60);
    left:0px;
    top:0px;
    display:none;
}

#window {
    position: absolute;
    width:300px;
    height:150px;
    background-color:#FF6600;
    z-index: 10;
    top:50%;
    left:50%;
    margin-left:-150px;
    margin-top:-75px;
    border:2px solid #FFFFFF;
    display:none;
}

</style>

&lt;script type="text/javascript">    
    function controldiv(obj1, obj2) {
           var sDiv1 = document.getElementById(obj1);
           var sDiv2 = document.getElementById(obj2);
           if(sDiv1.style.display == "block") {
                sDiv1.style.display = "none";
                sDiv2.style.display = "none";
                document.body.style.overflow="auto"; 
           } else {
                document.body.style.overflow="hidden"; 
                sDiv1.style.display = "block"; 
                sDiv2.style.display = "block";
           }
    }
</script>
    
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

<div id="fundo"></div>
<div id="window"><a onclick="controldiv('fundo', 'window')" href="java script:;">FECHAR</a></div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>    
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="text-align:center"><input type="button" value="Ativar" onclick="controldiv('fundo', 'window')"></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>
</html>

Se você baixar a barra de rolagem vai encontrar um botão. Clique sobre este botão e irá entender meu problema.

Quero que a DIV semi-transparente oculpe toda a página. Até que ela faz isto, mas somente se a barra de rolagem estiver no top.

O pior de tudo é que a outra DIV, a mais pequena, também deixa de ficar no centro.

Obrigado!

Editado Fevereiro 11, 2008 por diogoleter

fercosmig · Fevereiro 11, 2008

porque a div cinza está com height 100%

ela pega o tamanho total do screen.height

se você selecionar o texto da página e ir puxando para cima vai ver que ela ficou do tamanho da janela

na div cinza, faz um teste colocando 150% no height

diogoleter · Fevereiro 11, 2008

porque a div cinza está com height 100%
ela pega o tamanho total do screen.height
se você selecionar o texto da página e ir puxando para cima vai ver que ela ficou do tamanho da janela
na div cinza, faz um teste colocando 150% no height

fercosmig, obrigado pela resposta mas ainda não resolveria o problema caso a página fosse ainda maior, o que consequentemente aumentaria o tamanho da barra de rolagem.

Obrigado!

Entrar

Posição de DIV de acordo com o Scroll

Pergunta

diogoleter

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

diogoleter

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades