Como fazer sua própria barra de cabeçalho pegajosa como makeuseof

Cerca de um mês atrás, nós introduzimos um novo elemento de interface para MakeUseOf - uma navegação e pesquisa bar flutuante. O feedback que tenho recebido é quase inteiramente positivo, o tráfego de busca interna subiu rapidamente, e alguns leitores que têm sido perguntando sobre como fazer um para seu próprio site, então eu pensei que eu iria partilhar.

Vamos usar jQuery para furar a barra para a parte superior da tela - mas só passado um certo ponto. Eu vou fazer tudo isso no padrão WordPress tema - Vinte Eleven, embora, naturalmente, pode ser aplicado a qualquer tema ou site que você suficientemente entender como modificar.

o HTML

Primeiro, abra os temas header.php e identificar a barra de navegação que nós estaremos fazendo pegajoso. Como eu disse, o código abaixo é para o padrão seu vigésimo de onze podem variar.

Em primeiro lugar, adicionar um novo recipiente DIV em torno desta seção NAV inteiro.

Video: Receita caseira de Barrinhas Energéticas

Além disso, vamos passar essa barra de pesquisa padrão para aqui. Você vai notar que é adicionado por padrão ao canto superior direito da Theme- encontrar a linha ? Lt; get_search_form php () - gt; e colá-lo em nossa seção de navegação. Excluir todas as outras instâncias que neste arquivo.

Se você salvar e atualizar agora, você vai ver o formulário de busca na verdade não aparecem na barra de navegação - ele ainda mostra no canto superior direito. Isso porque ele foi posicionado absolutamente com CSS, e estaremos excluindo tudo isso em um segundo.

o CSS

Abra o arquivo style.css principal e encontrar a seção para o formulário de busca:

#searchform #branding {...}

Substituir o que está dentro que (deve ser capaz de cerca de quatro linhas, incluindo alguns posicionamento absoluto) com este:

Video: Barrinhas de açúcar (barras de cereal que na verdade são guloseimas disfarçadas)

#branding #searchform {float: left-background: white-margin: 7px -}

Sinta-se livre para ajustar a cor ou margem. Alterar o flutuador se você preferir que apareceu na direita da barra. Neste tema, a procura está definido para expandir quando o usuário clica dentro ele- que está fora do escopo deste tutorial, mas você pode ver um efeito semelhante em nosso MakeUseOf Search.

jQuery

Se você está se perguntando por que estamos usando jQuery para fazer isso, é simples: CSS é fixa, e não pode ser ajustado dinamicamente. Enquanto nós poderíamos usar CSS para fazer um cabeçalho pegajoso, ele precisaria ser o elemento superior da página. O problema que temos é que o nosso menu não é o elemento de topo, por isso não podemos começar com ele que é pegajoso. Este é o lugar onde o jQuery é utilizado- podemos verificar quando o usuário passa por um certo ponto- então, e só então, torná-lo pegajoso.

Video: Como fazer Barra de Cereal Caseira e natural

Comece adicionando jQuery a seu tema. Seu tema pode já tê-lo loaded- Se não, não se preocupe. Você pode enfileirar-lo, adicionando o seguinte código ao seu functions.php, assim:

lt;? my_scripts_method phpfunction () {wp_deregister_script ( `jquery`) -wp_register_script ( `jquery`, `http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js`)- wp_enqueue_script ( `jquery`) -} add_action ( `wp_enqueue_scripts`, `my_scripts_method`) - gt;

Ou você pode simplesmente ignorar WordPress por completo e incondicional isso no arquivo de cabeçalho. Em algum lugar na sua seção de cabeça, basta adicionar esta linha:

Se você usar o primeiro método, ele vai ser carregado em noConflict modo, o que significa que você vai precisar usar “jQuery” em seu código para acessar as funções jQuery. Se você usar o segundo método de adicionar-lo diretamente para o seu cabeçalho, você pode usar o acessor padrão jQuery de $. Eu vou assumir o segundo método no código abaixo.

Então, para adicionar algum código jQuery real, coloque o seguinte em algum lugar no final do seu header.php - Eu coloquei o meu pouco antes da

Video: Como Fazer Barrinha de Cereal Caseira - Projeto Vida Toda #39

A primeira coisa que o script faz é descobrir onde a barra de navegação começa em, e lembra-se esse valor. Em segundo lugar, anexar para o evento scroll - isso significa que cada vez que o usuário rola a página, podemos executar este bloco de código. Quando o código é executado, há duas maneiras que pode ir:
1. Se a janela tenha sido deslocada para além da barra de navegação, nós torná-lo um CSS fixo (esta é a parte “pegajosa”).
2. Se a parte superior da janela é maior do que a posição original da barra de navegação (ou seja, o usuário deslocado novamente para cima), vamos colocá-la de volta à posição estática padrão.

Há dois pontos que eu quero chamar a atenção para:

• O 288 está lá para corrigir o erro de ter uma posição- incorreta sem ele, o bar está provocando seu estado pegajoso cedo demais - removê-lo para ver o que quero dizer. Isso não será necessário marcar em todos os temas, e você provavelmente pode chegar a uma solução melhor.
• Para corrigir o problema da largura da barra de navegação mudar quando ele vai para o estado pegajoso, editar o style.css, linha 550, para ler 1000px ao invés de 100%

É isso, sua barra de navegação agora deve ser bem pegajoso.

Resumo:

A substituição completa header.php código para este tutorial pode ser encontrada neste pastebin- ea substituição style.css Aqui . Eu esperava que você tenha gostado deste pequeno Tutorial se você está tendo problemas, não postar nos comentários ou pedir afastado em Respostas MakeUseOf, mas lembre-se de fazer o seu site acessível ao público, para que eu possa ir junto e ter um olhar para mim mesmo. Se você é novo aqui, certifique-se de verificar todas as outras blogger e artigos de desenvolvimento web.