Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

CHmg1991

Mostrar Header

Por , em Javascript

Recommended Posts

CHmg1991    0

CHmg1991
Postado

Boa tarde!
Como faço para meu header aparecer quando o scroll estiver parado e quando a pessoa rolar a página (para cima ou para baixo) o header ocultar até que o scroll pare novamente? Obrigado!
(js vanilla)
 

Compartilhar este post

Link para o post
Compartilhar em outros sites

CHmg1991    0

CHmg1991
Postado

Consegui o que precisava da seguinte forma:

  

var cabecalho = document.getElementsByClassName("cabecalhoMain")[0];

window.onscroll = function(){
	if(window.pageYOffset){
		cabecalho.removeAttribute("style");
        window.setTimeout(function(){
        	cabecalho.style.position = "fixed";
            clearTimeout(this);
        },2500);
    }
};

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • 4Unknow
      Problema com scroll na página, política de privacidade.
      Por 4Unknow
      Fala galera, mais uma dúvida aqui.
      Eu to usando uma página para criar minhas políticas de privacidade e cookies, informações no caso.

      Porém coloco todas informações na página, mas quando clico em um item não aparece tudo o que eu digitei, se notarem no código fonte tem muito mais texto e informação para mostrar mas ele corta.

      Vou deixar link para download do mediafire do arquivo, não tem anuncio de nada no arquivo, apenas html puro mesmo e css com informações bem básicas.
       
      BAIXAR PÁGINA.ZIP

      Grato pela ajuda.
    • 4Unknow
      Conflito com ScrollTop [obs¹] botão para voltar para topo.
      Por 4Unknow
      Fala galerinha beleza, bom vamos lá.
      Eu tenho um site que o conteúdo dele é tudo em uma página só, o menu, quando escolho uma opção ele leva em uma determinada parte do site referente ao menu clicado. Até aqui ok.
      Porém eu instalei um botão para voltar para o topo quando rola o site para baixo, e como sou leigo em Java, notei que parece que tá tendo conflito com o ScrollTop, pois o botão que coloquei para voltar para o topo também tem o scrolltop. Gostaria de fazer funcionar o menu e o botão juntos, pois quando desativo o .js do botão o menu  funciona normal, quando ativo o botão novamente ele para de funcionar.

      Vou deixar o código de ambos aqui.

      .JS do Menu (scroll.min.js)

       
      (function(e){"use strict";var t="ScrollIt",n="1.0.3";var r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:0};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t<0||t>s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")||e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&&(r==n.upKey||r==n.downKey)){return false}if(r==n.upKey&&i>0){o(parseInt(i)-1);return false}else if(r==n.downKey&&i<s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&&t&&i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t>=e(i).offset().top+n.topOffset&&t<e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)  
      .JS do Botão Back to top (backtotop.js)

       
      jQuery(window).scroll(function(){ if(jQuery(window).scrollTop()<50){ jQuery('#rocketmeluncur').slideUp(500); }else{ jQuery('#rocketmeluncur').slideDown(500); } var ftrocketmeluncur = jQuery("#ft")[0] ? jQuery("#ft")[0] : jQuery(document.body)[0]; var scrolltoprocketmeluncur = $('rocketmeluncur'); var viewPortHeightrocketmeluncur = parseInt(document.documentElement.clientHeight); var scrollHeightrocketmeluncur = parseInt(document.body.getBoundingClientRect().top); var basewrocketmeluncur = parseInt(ftrocketmeluncur.clientWidth); var swrocketmeluncur = scrolltoprocketmeluncur.clientWidth; if (basewrocketmeluncur < 1000) { var leftrocketmeluncur = parseInt(fetchOffset(ftrocketmeluncur)['left']); leftrocketmeluncur = leftrocketmeluncur < swrocketmeluncur ? leftrocketmeluncur * 2 - swrocketmeluncur : leftrocketmeluncur; scrolltoprocketmeluncur.style.left = ( basewrocketmeluncur + leftrocketmeluncur ) + 'px'; } else { scrolltoprocketmeluncur.style.left = 'auto'; scrolltoprocketmeluncur.style.right = '10px'; } }) jQuery('#rocketmeluncur').click(function(){ jQuery("html, body").animate({ scrollTop: '0px',display:'none'},{ duration: 600, easing: 'linear' }); var self = this; this.className += ' '+"launchrocket"; setTimeout(function(){ self.className = 'showrocket'; },800) });

      Ficaria inteiramente grato se alguém pudesse me ajudar nessa.
      Um forte abraço a toda comunidade.


       
    • rafaelhslemes
      Meu site não atualiza nada além do header
      Por rafaelhslemes
      Eai, boa tarde. Estou desenvolvendo um site, e na página de registro onde estou tentando inserir título e labels para o cadastro, não aparece nada além do header da página. Segue o código abaixo da página de registro, junto com o print do site:
       
      <?php   ?>   <!DOCTYPE HTML> <html> <head>     <title>Registro - Ovelha Clone</title>     <link rel="stylesheet" type="text/css" href="style.css"> </head> <body>     <?php include("header.php") ?>     <center>         <h1>Registro</h1>         <div class="panel">             <form method="POST"                 <table width="50%">                     <tr>                         <td style="float: right;">Nome</td>                         <td><input type="name" name="nome" placeholder="Nome"></td>                     </tr>                 </table>             </form>         </div>     </center> </body>      

    • LucasLV
      Problemas com download ao utilizar header
      Por LucasLV
      Boa tarde.
      Estou fazendo um script que faz o download de arquivos de acordo com uma referência no bd, para que os usuários não saibam e não tenham acesso ao local original.
      Ele faz o download corretamente, mas na hora de abrir o arquivo ele não abre, aparece que a extensão está incorreta ou o arquivo corrompido.
      Com arquivos PDF ele funciona normalmente, mas testei com arquivos jpg, mp4, zip e rar, e nenhum deles abriu.
       
      Esse é o código que faz o download:
      $r = $con->executar("SELECT `MENSAGENS_COD`,`ARQUIVO` FROM `LINKS_ARQUIVOS` WHERE `REFERENCIA` = ?;",array($_GET['file']),"F"); header('Content-Disposition: attachment; filename=Anexo Mensagem '.$r['MENSAGENS_COD'].'.'.pathinfo($r['ARQUIVO'],PATHINFO_EXTENSION)); header('Content-Type: '.mime_content_type($r['ARQUIVO'])); header('Content-Transfer-Encoding: binary'); header('Content-Length: '.filesize($r['ARQUIVO'])); readfile($r['ARQUIVO']);  
      Pesquisando na internet vi exemplos com o content-type como octet/stream e sem esse contetnt-transfer-encoding, mas fiz testes com essas modificações e não obtive êxito.
      Também vi que quando abro os detalhes do arquivo (imagem) no Windows, o arquivo do servidor exibe as informações corretamente, como largura e altura, já o arquivo baixado não exibe nada.
    • Sapinn
      Como fazer para o menu ficar fixo quando rolar para baixo
      Por Sapinn
      Quero que quando o usuario chegue em uma parte do menu site ele o menu fique fixo no topo da pagina. Como fazer isso???
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito