Ir para conteúdo

POWERED BY:

Arquivado

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

Infolu

Barra Flutuante igual do submarino e kalunga

Por , em Javascript

Recommended Posts

Infolu    0

Infolu
Postado

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

 

:)

Compartilhar este post

Link para o post
Compartilhar em outros sites

0cool    0

0cool
Postado 
<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Infolu    0

Infolu
Postado

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

bgover.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

0cool    0

0cool
Postado

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>

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