Muitas vezes, em sites com muito conteúdo, o visitante se perde na página e tem que rolar até o topo da página para encontrar o menu de navegação. As tecnologias não param, as telas dos monitores e suas resoluções estão cada vez maiores, então agora em um site não é mais uma pena alocar 40 pixels na parte superior para um menu fixo ao rolar a página de um site. O visitante poderá sempre ver em qual seção se encontra, além de ter acesso rápido ao menu de navegação. Em última análise, isso aumenta a profundidade da navegação no site :)
Qual é a essência de um menu de navegação fixo em um site? Inicialmente, nosso menu está localizado em seu lugar habitual, em algum lugar do cabeçalho, no meu caso a uma distância de 140px da borda superior. Assim que o visitante rola a página pelos mesmos 140px na parte inferior, o menu é fixado no topo da janela e permanece lá pelo resto do tempo até que a rolagem retorne à posição superior.
Um menu fixo ao rolar uma página é essencialmente um painel de controle que está sempre com você. Nosso cardápio será simples.
Da teoria à prática. Tudo é bastante simples e minimalista, a maior parte dada a estilos que você pode personalizar. Fiz um menu fixo como na imagem, ao rolar a cor do menu fica levemente transparente para não parecer pesado e o conteúdo abaixo ficar visível.
Nossos estilos. Tenho um menu com largura de 1180px, localizado no centro. O cabeçalho tem 180px de altura, o menu de rolagem está incluído nele e ocupa 40px. Isso significa a distância do topo 140px. Vamos lembrar esse número)
#header ( altura: 180px; ) #navigation( background: #EF0505; altura: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); tamanho da fonte: 16px; altura da linha: 40px; posição: relativa; topo: 140px; ) #navigation.fixed( posição: fixa; topo: 0; largura: 100%; fundo: rgba(239, 5, 5, 0,95); ) #navigation ul( largura: 1180px; preenchimento -esquerda: 0; margem: 0 automático; exibição: bloco; ) #menu li( float: esquerda; estilo de lista: nenhum; preenchimento: 0 25px; borda direita: 1px sólido #D60000; ) #menu a ( cor: #fff; decoração de texto: nenhum; família de fontes: Verdana; ) #menu>li a:hover( color: #656565; transição: cor 0,5s de facilidade; )
E aqui estão algumas linhas de código que fazem mágica) Definimos as condições para rolar a página, acima de 140px ou abaixo. Dependendo disso, a classe fixa é atribuída ao nosso menu de navegação. E com essa aula, como dito acima, deixamos o menu fixo e fixado no topo.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else se ($(este).scrollTop()
Observe que se houver aspas simples no código entre echo "" , elas precisarão ser escapadas, ou seja, coloque uma barra invertida (\") na frente de cada um deles, sem parênteses, é claro.
Em geral, acabou como aconteceu. Você terá que decidir por si mesmo como anexar isso especificamente ao seu tópico - quando tiver tempo, é até divertido “quebrar a cabeça”. Obrigado.
Boa sorte para você! Nos vemos em breve nas páginas do blog
Você pode estar interessado
WebPoint PRO é um tema WordPress responsivo com ampla funcionalidade e otimização técnica competente para mecanismos de busca 
Share42 - um script para adicionar botões de redes sociais e marcadores ao site (há uma opção de painel flutuante)
Que são encontrados cada vez com mais frequência nas páginas de blogs e outros recursos. O uso de tais barras de navegação é bastante justificado. Um dos principais motivos para o uso ativo desses plugins jQuery é que o menu está sempre ao alcance do visitante, mesmo que esteja no final da página. Além disso, um menu fixo ocupa pouco espaço e não desvia a atenção do conteúdo principal. De modo geral, um menu fixo melhora a usabilidade do site.
Eu reuni uma coleção dos melhores, na minha opinião, plug-ins jQuery gratuitos para implementar um menu fixo. Tentei garantir que cada um dos plugins fosse único de alguma forma, para que qualquer plugin da seleção pudesse ser usado especificamente em seu projeto. Na coleção você pode encontrar plugins simples e mais complexos com animação, etc.
Se você precisa de um menu fixo bem simples, algo como implementamos um painel fixo com botões sociais, você pode dispensar os plugins jQuery, pois carregar a página com scripts não é muito bom, mas falaremos sobre isso nos próximos artigos. Inscreva-se em nosso canal ou páginas para não perder materiais interessantes.
Então. Aqui estão 6 plugins jQuery para criar um menu fixo.
