Barra Superior Acompanhar Scroll JQUERY

[s3c0 0]

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?

[gabrielms 0]

@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 0]

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.