TollBar similar ao do submarino

[porao 0]

Ola pessoal,

venho com uma pedreira hoje.

 

quero implantar em meu site um toolbar similar ao do site do submarino. submarino.com.br

 

o tollbar(que aparece no topo do browser) so aparece quando rolamos a tela para baixo.

Alguem pode me dar uma luz?

 

abraçao

[wdc_black_ 0]

eai porao, olha ja vi tollbares em jquery bem similares a esse, mas com as funcoes de ocultar e mostrar iguais ao do submarino nunca vi...

tu poderia pegar um tollbar em jquery e editar para fazer exatamente o que tu precisa ^^

 

aqui vai 1 link de um parecido ;)

 

http://jquery-sitebar.googlecode.com/files/sitebar.rc1.zip

 

abraços

[Ramon Almeida 0]

Cara é simples, é só você fazer a verificação de em qual posição da página o usuário está utilizando scrollTop.

Exemplo simples:

 

$(window).scroll(function(){
 if($(this).scrollTop() == 0){
   $("#toolbar").hide();
 }else{
   $("#toolbar").show();
 }
})

[porao 0]

Nossa, primeiramente obrigado pelas respostas. Eu cada vez mais eu vejo que sou pessimo em JS...hehhe

Eu to achando isso tao complicado...

 

eu tenho esta div:

<div id="toolbar" style="position: absolute; position: fixed; bottom: 0px; right: 186px; left: 196px;	padding-top: 5px; z-index: 999;border: solid 1px #000;height:45px;width:auto;overflow:visible;
       background-color:#CCC;
       opacity:0.9;
       filter:alpha(opacity=90);"></div>

 

 

tbm coloquei isso no codigo, acima do /head:

<script type="text/javascript">

$(window).scroll(function(){
 if($(this).scrollTop() == 0){
   $("#toolbar").hide();
 }else{
   $("#toolbar").show();
 }
})

</script>

 

 

devo ter feito algo errado

[Ramon Almeida 0]

Só uma pergunta, você sabe utilizar o JQuery?

Para o seu código funcionar, você precisa carregar o jquery no documento, e colocar o script que eu postei dentro do envento ready do elemto document.

 

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
 if($(this).scrollTop() == 0){
   $("#toolbar").hide();
 }else{
   $("#toolbar").show();
 }
});
});
</script>

[porao 0]

Funcionou amigo, muito legal!

 

E nao há como fazer mais opções, como por exemplo fadein/fadeout, ou até mesmo para ele aparecer só quando a tela descer uns 300px?

 

Olha amigo, na tentativa QUASE consegui, mas me falta "catigoria"...

 

<script type="text/javascript">
$(document).ready(function(){
               jQuery.fn.fadeToggle = function(speed, easing, callback) {
                   return this.animate({opacity: 'toggle'}, speed, easing, callback);
               };
$(window).scroll(function(){
 if($(this).scrollTop() <= 500){
   $("#toolbar").fadeToggle("slow");
 }else{
   $("#toolbar").fadeToggle("slow");
 }
});
});
</script>

[Ramon Almeida 0]

Para os efeitos de Fade, o JQuery já tem por padrão:

$().fadeIn();
$().FadeOut();
$().FadeTo();
$().fadeToggle()

 

Para ajustar a altura certa, nada como o console pra dar uma ajuda:

Adiciona no evento scroll:

 

console.log($(this).scrollTop());

 

Acessa a página, ajusta a posição que você deseja aplicar o fade, vai no console do navegador e o último número é a sua altura.

[porao 0]

Muito legal, você é fera

e onde eu vejo as opções do hide() por exemplo...onde eu acho literatura a respeito disso para eu ir aprendendo

[Ramon Almeida 0]

porao,

a melhor forma de aprender sobre o jquery é lendo sua documentação:

http://api.jquery.com/category/effects/fading/