Publicado em 14 de ago.

Barra Superior Acompanhar Scroll JQUERY

Boa tarde galera,

estou precisando que a barra superior acompanhe o Scroll. Está funcionando de acordo com o propósito, porém se der um Refresh no meio da página por exemplo, a barra superior não aparece.

$("document").ready(function($){

	$(window).scroll(function () {
 if ($(this).scrollTop() > 68) {
 $('.topo').fadeIn();
 $('.topo').css("position","fixed")
 $('.topo').css("z-index","2")
 $('.topo').css("margin-top","-68px")
 } else {
 $('.topo').css("position","absolute")
 $('.topo').css("z-index","1")
 $('.topo').css("z-index","2")
 $('.topo').css("margin-top","0px")
 }
 });
});

	 

	Alguém possui alguma ideia do que está errado?

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

gabrielms· 14 de ago.

@s3c0 Bom essa função só é chamada quando o usuário mexe no scroll, quando ele recarrega uma pagina no meio o script não é chamado, já que ele não mexeu no scroll. Para resolver isso, basta adicionar uma verificação depois que a página for carregada.

Exemplo

if($(window).scrollTop() > 68) // Caso o scroll dá página esteja em uma posição maior que 68 ele vai adicionar o css de baixo
{
$('.topo').css({
"position":"fixed",
"z-index":"2",
"margin-top":"0px",

 });
}

	O código final, ficaria assim:

$(function()
 {
 // Verificação do scroll dá pagina
 if($(window).scrollTop() > 68)
 {
 $('.topo').css({
 "position":"fixed",
 "z-index":"2",
 "margin-top":"-68px",
 });
 }

 $(window).scroll(function() // Essa função só vai ser executada quando um usuário mexer no scroll dá página.
 {
 if ($(this).scrollTop() > 150){
 $('.topo').fadeIn();
 $('.topo').css({
 "position":"fixed",
 "z-index":"2",
 "margin-top":"-68px",
 });
 }
 else
 {
 $('.topo').css({
 "position":"absolute",
 "z-index":"2",
 "margin-top":"0px"
 });
 }
 });
 });

	Obs..: Por qual motivo você atribui dois z-index diferentes para o mesmo elemento?

s3c0· 15 de ago.

Olá @gabrielms obrigado pela ajuda amigo.

testei aqui e está funcionando perfeito...

Alterei a linha abaixo:

if ($(this).scrollTop() > 150){

para

if ($(this).scrollTop() > 68){

referente ao Z-index, foi um erro mesmo que esqueci de apagar uma das linhas.

Muitíssimo obrigado amigo.