Melhor do que fixo, o código de cabeçalho parece rolar e desaparecer

Basta posicionar: fixo, em vez de fixar um cabeçalho de site ou navegação em um estilo, os cabeçalhos que aparecem em resposta ao deslocamento desaparecem e a tela é muito melhor. O cabeçalho que reage à rolagem é um logotipo do site, menu, barra de navegação, etc, que pode fornecer uma experiência de usuário mais eficiente e agradável.

Por que você deve escrever cabeçalhos que respondem à rolagem

Há muitas pessoas que querem sempre mostrar o cabeçalho e barra de navegação para o usuário, o topo da tela 100px menos do que um monte de espaço, o logotipo eo menu do blog em seu site, etc. Isso pode não importar muito em telas de desktop. No entanto, em média, os usuários móveis que não 600px o tamanho vertical são sempre obscurecidos por um mínimo de um sexto da tela (considerando a navegação do seu próprio navegador, mas também cerca de 1/3 ~ 1/4), o usuário não pode esconder ou controlar é bastante violento (?) Desconforto.

Por causa disso, você deve responder por sua conveniência ou navegação (com pensamento subjetivo) e sempre manter o cabeçalho na parte superior da tela. Se você quiser um cabeçalho que é sempre implementado, o cabeçalho desaparece quando o usuário rola ou toca o conteúdo se você quiser ler o conteúdo ou escrever um menu, ou usar a função de navegação para rolar para cima ou tocar na tela, então você precisa implementar um cabeçalho que aparece novamente (é claro, essa abordagem pode ser inconveniente para os usuários que querem ver o acima novamente). Se você não está indo para implementar isso pessoalmente, recomendamos que você não basta usar a posição: fixo.

3 passos para criar um cabeçalho que reage à rolagem

Há várias maneiras de criar cabeçalhos que respondem à rolagem. Mas considere os padrões da Web que são expressos em qualquer ambiente, eu recomendo usar jQuery em vez de usar métodos como CSS. Gkkmon (Awake), mas também tentar não usar JavaScript ou jQuery (porque é mais provável que lag em termos de velocidade ou recursos do que usar funções básicas). o cabeçalho que reage à rolagem é porque o método JQuery tem mostrado grandes padrões da Web sem sacrificar o desempenho significativamente.

Para usar jQuer
y 1. Importe o plugin JQuery.
2. Você declara um script a ser usado pelo plug-in JQuery importado.
3. Você precisa tocar em HTML, PHP e CSS.

Carregando JQuery plug-in

O plugin para a criação de cabeçalhos que respondem à rolagem é a versão do jQuery-2.2.2. Para carregar este plugin

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>

.

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

, você pode usar esse método porque a versão tem um minuto atrás dele, que é o mesmo código, mas permite que você carregar mais rapidamente removendo espaço e assim por diante.

Declarando scripts no plug-in JQuery importado

Depois de chamar o plug-in, você precisa declarar qual script você deseja usar.

<script></script>
$ (função {) {
    lastscrolltop var = 0,
        Delta = 15;
    $ (janela). Scroll (função (evento) {
        var St = $ (this). ScrollTop ();
        If (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
        If ((St > Lastscrolltop) &amp; & (Lastscrolltop-0)) {
            $ ("nome do elemento"). CSS ("Top", "-ocultar altura");
        Mais
            $ ("nome do elemento"). CSS ("Top", "0px");
        }
        Lastscrolltop = St;
    });
});  

Coloque a classe ou ID do elemento que você deseja controlar no nome do elemento. Costumo colocar Said. Header. Você deve definir a altura ou superior do elemento para ocultar, porque ele irá explodir a tela com a luz-PX quando oculto. Altura: se pretender controlar o nome da classe 50px. cabeçalho

<script></script>
$ (função {) {
    lastscrolltop var = 0,
        Delta = 15;
    $ (janela). Scroll (função (evento) {
        var St = $ (this). ScrollTop ();
        If (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
        If ((St > Lastscrolltop) &amp; & (Lastscrolltop-0)) {
            $ (". Header"). CSS ("Top", "-50px");
        Mais
            $ (". Header"). CSS ("Top", "0px");
        }
        Lastscrolltop = St;
    });
});  

. O conteúdo deste script é, "se o toque ou rolagem do mouse detecta que a tela está para baixo, isso significa alterar a parte superior do CSS do. Header para-50px, e alterar a parte superior do CSS do. Header para 0px quando a rolagem é para cima."

CSS especifica o estilo dos elementos, e Top especifica a posição da parte superior da tela do elemento especificado pela Position Propriedade. Em outras palavras, o topo da tela 0px e-50px para ir e para trás.

Alterar CSS para coincidir com o script com jQuery

Finalmente, você pode alterar o CSS de acordo com as configurações do jQuery.

<style></style>
Cabeçalho
Posição: fixo;
/* Posição: Fix com fixo */
Z-index: 20;
/* Definir índice z apropriado porque ele pode ser obscurecido por outros elementos */
Largura: 100%;
/* Tela 100% tamanho horizontal e */
Altura: 50px;
/* Faça um cabeçalho de 50px verticalmente */
Caixa-dimensionamento: Border-Box;
Transição: todos os 0,2 s facilidade; 
/* Desaparece quando ele aparece e dá o efeito que parece liso, não há necessidade de colocar */
-WebKit-transição: todos os 0,2 s facilidade;
-Moz-transição: todos os 0,2 s facilidade;
-O-transição: todos os 0,2 s facilidade;
}

Com todos os três, podemos responder ao pergaminho e criar um grande cabeçalho que se parece com ele desaparece.

O código acabado

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script></script>
$ (função {) {
    lastscrolltop var = 0,
        Delta = 15;
    $ (janela). Scroll (função (evento) {
        var St = $ (this). ScrollTop ();
        If (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
        If ((St > Lastscrolltop) &amp; & (Lastscrolltop-0)) {
            $ (". Header"). CSS ("Top", "-50px");
        Mais
            $ (". Header"). CSS ("Top", "0px");
        }
        Lastscrolltop = St;
    });
});  


<style></style>
Cabeçalho
Posição: fixo;
Z-index: 20;
Largura: 100%;
Altura: 50px;
Caixa-dimensionamento: Border-Box;
Transição: todos os 0,2 s facilidade; 
-WebKit-transição: todos os 0,2 s facilidade;
-Moz-transição: todos os 0,2 s facilidade;
-O-transição: todos os 0,2 s facilidade;
}

Se você defini-lo como descrito, você pode facilmente ter um cabeçalho de alta qualidade que fornece uma grande experiência do usuário. Não é um grande negócio, então vamos corrigi-lo para o seu site ou blog 24/7, sempre para um cabeçalho flutuante. Eu sei que eu estou familiarizado com o site, o cabeçalho é sempre fixo e tela-like ' Toolbar ', porque dá ao usuário a pior experiência do usuário.