Publicado em 27 de mai.

Barra Flutuante igual do submarino e kalunga

Boa Tarde amigos raramente peço ajuda e nem sei se estou postando no lugar correto

Mais estou com uma dificuldade necesito criar uma barra flutuante para loja virtual a barra igual do www.submarino.com.br ou www.kalunga.com.br

A barra flutuante do topo ke aparece apos a rolagem abaixo da pagina

Alguem me de uma luz ficaria muito agradecido

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

0cool· 27 de mai.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#conteudoDiv').show().delay(8000).fadeOut("slow");
 $('#ocultar').click(function(event) {
 $('#conteudoDiv').clearQueue();
 event.preventDefault();
 $("#conteudoDiv").fadeOut(1000, function () {
 $("#conteudoDiv").hide("slow")
 });
 });
 document.body.style.overflowX = 'hidden';
});
</script>
<style type="text/css">
#conteudoDiv {
 position:absolute;
 background-color:transparent;
 margin:0;
 width:350px;
 top:300px;
 left:400px;
 height:300px;
 z-index:9999;
 text-align:right;
}
</style>
</head>
<body>
<div id="conteudoDiv">
 <a href="#" id="ocultar" style="cursor:pointer;">
 <img src="http://www.kalunga.com.br/_images/fechar.png">
 </a>
 <object width="350" height="300">
 <param name="movie" value="http://www.kalunga.com.br/anuncios/div/475808.swf">
 <embed src="http://www.kalunga.com.br/anuncios/div/475808.swf" width="350" height="300"></embed>
 </object>
</div>
</body>
</html>

Infolu· 27 de mai.

Opa Valeu amigo esse codgo funciona perfeitamente mais nao é bem isso ke to necessitando o ke precizo é akela barra over n topo

aki markei na foto

/applications/core/interface/imageproxy/imageproxy.php?img=http://infolu.com.br/product_images/uploaded_images/bgover.jpg&key=27af38f6466d2623168512aaee59a1e5195b2de2dd399e82e77e0adc2ed223c2" alt="bgover.jpg" />

0cool· 28 de mai.

Essas do submarino e kalunga, são feitas utilizando frameworks próprias, daria muito trabalho para depurar, além disso esse efeito é bem simples de ser feito.

Fiz um modelo em jquery, veja como é bem básico, a complexidade nisso é o css, mais ai já é outros quinhentos, veja ai o exemplo simples que eu fiz, estude ele e mande bala na parte css.

http://users10.jabry.com/ocool/topo/

Pra ficar registrado aqui...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Teste Topo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">

body{

 margin: 0;
 padding: 0;
}
#topo {
 width: 100%;
 height: 28px;
 position: fixed;
 background-color: #000;
 text-align: center;
 font-family: tahoma;
 font-size: 12px;
 color: #FFF;
 top: -36px;
 padding-top: 8px;
}
</style>
</head>

<body>

<div id="topo">aqui vai o css do topo personalisado</div>

<div id="conteudo" align="center">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>

<script type="text/javascript">
$(document).ready(function(){
 $(window).scroll(function(){
 if ($(this).scrollTop() !== 0){
 $('#topo').stop().animate({"top": 0});
 } else {
 $('#topo').stop().animate({"top": "-36px"});
 }
 });
 $('#topo').click(function(){
 $('body,html').animate({scrollTop:0},1000);
 });
});
</script>

</body>
</html>