Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

morpheus

Publicidade Flutuante

Por , em Javascript

Recommended Posts

Leo Almeida    0

Leo Almeida
Postado

Isso é uma DIV...

 

<html>
<head>
<title>DIV</title>
<style type="text/css">
<!--
.posicao {
	border-style:solid; /*tipo de borda*/
	border-width:thin; /*largura da borda*/
	background-color:#4444FF; /*cor de fundo da div*/
	width:200px; /*largura da div*/
	height:300px; /*altura da div*/
	position:absolute; /*faz a div ficar sobre qualquer coisa*/
	left:150px; /*posição horizontal*/
	top:60px; /*posição vertical*/
}
-->
</style>
</head>
<body>
<div class="posicao">Seu conteudo vai aqui...</div>
</body>
</html>

espero que tenha ajudado...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leo Almeida    0

Leo Almeida
Postado

Tenta algo como:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DIV</title>
<style type="text/css">
<!--
.posicao {
	border-style:solid; /*tipo de borda*/
	border-width:thin; /*largura da borda*/
	background-color:#4444FF; /*cor de fundo da div*/
	width:200px; /*largura da div*/
	height:400px; /*altura da div*/
	position:absolute; /*faz a div ficar sobre qualquer coisa*/
	left:150px; /*posição horizontal*/
	top:20px; /*posição vertical*/
}
-->
</style>
<script>
function moveMenu(){
	banner_top = document.getElementById('banner').style.top.replace('px','')
	doc_top = document.documentElement.scrollTop + 20;
	if (doc_top > banner_top){
		banner_top = Number(banner_top) + 3
		document.getElementById('banner').style.top=banner_top;
	}else if (doc_top < banner_top){
		if (Number(banner_top) - 3 < doc_top){
			banner_top = Number(banner_top) - 1
		}else{
			banner_top = Number(banner_top) - 3
		}
		document.getElementById('banner').style.top=banner_top;
	}
}
window.setInterval("moveMenu()",1)
</script>
</head>
<body>
<div id="banner" class="posicao">Seu conteudo vai aqui...</div>
</body>
</html>

Coloque a function moveMenu() e o setInterval na tag <script> da sua página, e a div em qualquer parte da tag <body>, movimente o scroll e ela irá decer ou subir...

 

Esse é o básico, mas você pode ir melhorando...

 

Qualquer coisa , estamos ai...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leo Almeida    0

Leo Almeida
Postado

Morpheus, eu acabei de testa no IE e no Firefox, e estão funcionando...

 

copie e cole o código, e insira várias linhas na sua página e mova o scroll...

 

Assim fica mais fácil de visualizar o código!

Compartilhar este post

Link para o post
Compartilhar em outros sites

morpheus    0

morpheus
Postado

Leo, mais uma vez obrigada, mas olha só meu código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Pub</title>

<style type="text/css">

<!--

.posicao {

border-style:solid; /*tipo de borda*/

border-width:thin; /*largura da borda*/

background-color:#4444FF; /*cor de fundo da div*/

width:200px; /*largura da div*/

height:400px; /*altura da div*/

position:absolute; /*faz a div ficar sobre qualquer coisa*/

left:150px; /*posição horizontal*/

top:20px; /*posição vertical*/

}

-->

</style>

<script>

function moveMenu(){

banner_top = document.getElementById('banner').style.top.replace('px','')

doc_top = document.documentElement.scrollTop + 20;

if (doc_top > banner_top){

banner_top = Number(banner_top) + 3

document.getElementById('banner').style.top=banner_top;

}else if (doc_top < banner_top){

if (Number(banner_top) - 3 < doc_top){

banner_top = Number(banner_top) - 1

}else{

banner_top = Number(banner_top) - 3

}

document.getElementById('banner').style.top=banner_top;

}

}

window.setInterval("moveMenu()",1)

</script>

</head>

 

<body>

<div id="banner" class="posicao">Seu conteudo vai aqui...</div>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p p p p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<p>pppp </p>

</body></html>

 

Não sei o que ta passando, não funfa mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito