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 Webster Moitinho
      Implementei em meu site o JQuery Autocomplete e consegui fazer ele funcionar na boa. Porém não estou conseguindo fazer com que, quando o usuário pesquisar pelo termo, e selecionar na lista, ele seja direcionado para a respectiva página.
       
      Meu código está assim:
      <div id="pesquisa"> <form action="index.php?id=<?php echo $target; ?>&tp=smp" method="post" name="autocomplete" target="_self"> <strong>Pesquisa:</strong> <input id="autocomplete" title="Digite algo" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;Digite algo"> <button id="button-icon">Pesquise</button> </form> </div><!--pesquisa--> <script src="libraries/jquery.js"></script> <script src="libraries/jquery-ui.js"></script> <script> <?php $sql = "SELECT pags.id, pags.title, pags.keywords, pags.tema FROM pags WHERE vendavel = 'S' ORDER BY pags.id"; $resultado = $PDO->query( $sql ); $rows = $resultado->fetchAll(PDO::FETCH_ASSOC); ?> var availableTags = [ <?php foreach ($rows as $key => $linha) { $target = $linha['id']; echo '"' . $linha['title'] .' | ' . $linha['keywords'] . '",'; } ?> "" ]; $( "#autocomplete" ).autocomplete({ source: availableTags }); $( "#button" ).button(); $( "#button-icon" ).button({ icon: "ui-icon-gear", showLabel: false }); </script>  
    • By skti
      Boa tarde, me chamo Augusto e gostaria de saber como preencher o campo automaticamente seguindo o formato descrito no título.. por exemplo, ao digitar os 3 primeiros números do cpf, o '.' (ponto) ser preenchido automaticamente. Sou iniciante e o mais perto que cheguei foi criar um input que, quando são digitados 3 caracteres, apareça um '-' (hífen), ficando xxx- por exemplo, porém, de maneira incorreta pois ao continuar digitando o texto ficava xxxxxx- ao inves de xxx-xxx e assim por diante. Agradeço quem puder ajudar! :)
    • By CharlieAldrin
      Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário.
      Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? 
      Ou me informar se existe alguma forma melhor de conferir isso?
       
      Valeu desde já :) 
    • By s3c0
      Olá amigos,
       
      estou tentando fazer um slide com JQUERY de troca de DIV, porém não estou conseguindo sem uso de plugins.
       
      A ideia seria a hora que abrir o modal, mostrar as "Colunas" 1 e 2, e com o tempo mudar para 3 e 4 em loop infinito.
      Coloquei 2 "botões" somente para ir testando o código, porém não consegui realizar o slide corretamente.
       
      Alguém teria alguma sugestão?
       
      <div class="modal_banner"> <a class="fechar_modal" onclick="javascript:close_modal_banner();"><svg aria-hidden="true" focusable="false" data-prefix="fas" id="btn_modal" width="30" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg></a> <div class="topo_modal"> <span id="logo_modal"><img src="logo.png" width="150px"></span> <span id="texto_topo"><p>texto</p><span></div> <div style="top: 50%;left: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="seguinte" onclick="esquerda();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg></a></div> <div class="corpo_modal_banner"> <div class="product-item"> <div class="products-row" style=""> <div class="coluna" >1</div> </div> <div class="products-row" style=""> <div class="coluna" >2</div> </div> <div class="products-row" style=""> <div class="coluna">3</div> </div> <div class="products-row" style=""> <div class="coluna">4</div> </div> <div style="top: 50%;right: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="anterior" onclick="direita();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg></a></div> </div> </div> </div> function esquerda(){ $('.products-row').hide("slide", { direction: "left" }, 500); }; function direita(){ $('.products-row').hide("slide", { direction: "right" }, 500); };  
      Agradeço a atenção de todos!
    • By altyouth
      Sou iniciante, e estou tentando utilizar JQuery em um projeto, estou fazendo sua instalação via npm, e incluindo o escopo global no arquivo js. Mas quando abro a pagina e verifico o console, o mesmo aponta erro no $ do escopo global dizendo que nao foi referenciado. Ja pesquisei sobre pra ver se conseguia resolver, mas o problema persiste. 
×

Important Information

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