Jump to content
s3c0

Barra Superior Acompanhar Scroll JQUERY

Recommended Posts

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?

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By marsolim
      fala rapaziada tudo bem? sabe me dizer se tem diferença de performance, de compatibilidade e etc e tal entre o jquery $(this).val() e o javascript puro this.value? tava tentando pesquisar aqui mas não achei nada sobre.
      grato
    • By juliosertori
      Olá boa tarde, tudo bem?
       
      Tenho uma consulta de CEP via AJAX, na qual ele seleciona a cidade no SELECT cidades:
       
      $("#cidade").val(dados.localidade);
       
      O problema é que tem que estar exatamente igual nos 2 lados, na consulta e no select.
       
      Como fazer para não diferenciar minúsculas e maiúsculas, e caracteres especiais?
       
      Obrigado!
    • By juliosertori
      Olá tudo bem?
       
      Tenho campos de produtos que somam os valores e multiplicam pela quantidade, na maioria das vezes o valor sai corretamente em um INPUT com MASK de Moeda, mas alguns valores sai por exemplo dessa forma:
       
      8984.960000000001
       
      O que faz com que não fique corretamente para mandar no POST e tratar os dados depois, na maioria das vezes ele vem correto, por exemplo:
       
      R$ 8,898.10
       
      Não encontrei uma forma dele tratar quando tiver várias casas ele concertar etc.
    • By Carcleo
      Pessoal, bom dia!
       
      Tenho o código abaixo que faz um efeito de parallax e está funcionando normalmente
      CSS
      #top {     background: url("img/1.jpg");     height: 300px; } #mid {     background: url("img/2.jpg");     height: 400px; } #bot {     background: url("img/3.jpg");     height: 500px; } HTML
      <script type="text/javascript" src="jquery.js"></script>   <body>   <div id="top" class="prlx"></div>   <div id="mid" class="prlx"></div>   <div id="bot" class="prlx"></div> </body>  JQUERY
      $('.prlx').each(function() {        var obj = $(this);        obj.css('background-position', 0);     obj.css('background-attachment', 'fixed');        $(window).scroll(function() {     var offset = obj.offset();     var yPos = -($(window).scrollTop() - offset.top) / 10;     var bgpos = '50% ' + yPos + 'px';     obj.css('background-position', bgpos);   });    }); Fui aplicar no meu site 
       
      https://acweb.net.br/
       
      e o efeito parallax não funcionou embora no inspector dá para ver os cálculos sendo feitos e adicionado às sections
       
      Alguém me ajuda a descobrir onde errei?
       
      Já estou faz um tempão e não acho!
       
      As sections afetadas são as que começam com os textos
       
      Fazemos todo o trabalho por você e contato, 
    • By juliosertori
      Olá galera tudo bem?
       
      Tenho um While em Javascript, e preciso dentro dele um JSON, ex:
       
      while ( qtdProd <= qtdProdutos ) { { "cod_barras": "SEM GTIN", "codigo_produto": 1, "nome_produto": "Coca-cola lata 350 ml", "ncm": "44071100", "unidade": "UN", "quantidade": 1.00, "valor_unitario": 3.5, "compoe_valor_total": 1 } qtdProd++; } Logicamente assim não funciona, mas não encontrei como inserir corretamente
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.