Com WP Sticky Sidebar, você pode criar uma barra lateral fixa, ou flutuante no seu tema WordPress. O plugin cola a barra lateral do seu site, tornando-a permanentemente visível durante a rolagem.
Plugin WP Sticky Sidebar - barra lateral pegajosa, trabalhará fora da caixa com alguns temas que usam id de elemento segundário, por exemplo: #sidebar para barra lateral. Mas você pode adicionar isso dentro das configurações do plugin.
Por padrão, o plugin usa o ID do elemento #secondary no campo de configuração Sticky Class e deve ser modificado para diferentes temas para que funcione. Não esqueça disso, é um campo obrigatório, mas é fácil de adicionar.
O plugin é localizado e responsivo, ou seja vários idiomas e várias telas. A vantagem deste plugin simples é que aumenta a usabilidade do site WordPress desde sidebar é visível na maioria das vezes.
Opções de Plugin WP Sticky Sidebar
Sticky Class: classe CSS ou id do elemento da barra lateral desejado para ser pegajoso. O padrão é #secundary. Este é um campo obrigatório e deve ser preenchido, com o ID, ou Class do CSS da barra lateral do seu tema.
Container Class: Classe ou ID do elemento Container. Se o script for deixado em branco o plugin tentará adivinhar. Deve ser um elemento que contenha a barra lateral e o conteúdo. Geralmente é #main ou # main-content ou #primary. Principalmente esse parâmetro não é necessário para a maioria dos temas.
Margem superior adicional: uma margem superior adicional em pixels. O padrão é 90.
Margem inferior adicional: uma margem inferior adicional em pixels. O padrão é 0.
Desativar a barra lateral persistente se a largura da tela for menor que o número desejado de pixels. Ele desabilita o script em dispositivos móveis ou qualquer dispositivo cuja tela não seja tão larga quanto o número de pixels inserido.
Atualize a opção de solução de problemas de altura da barra lateral. Tente isto se sua barra lateral perder sua cor de fundo…
Desativar barra lateral pegajosa em: página inicial, página do blog, páginas, postagens, categorias, tags, arquivos
- Ativar postagens e páginas específicas se anteriormente desativadas em todo o site.
- Pronto, depois de fazer estas configurações sua barra lateral deve estar funcionando.
Outros dados do plugin WP Stick Sidebar
WP Sticky Sidebar é compatível com o sidebar Automizer, que equaliza a altura da barra lateral com a altura do conteúdo, se configurado corretamente. Você pode usar esses dois plugins em uma combinação. Principalmente, se você tiver muitos widgets, juntamente com o conjunto de mensagens longas e ocultá-los em posts com pouco ou nenhum conteúdo.
Criando uma Barra lateral flutuante apenas com CSS
Se você quiser tentar criar sua barra lateral flutuante, ou pegajosa; como queira chamar; apenas com CSS, siga lendo.
Primeiramente, clique em qualquer lugar na sua barra lateral, para procurar o ID da barra lateral. Clique com o botão direito do mouse e clique em Inspecionar. Eu recomendo usar o navegador Chrome para isso.
Dependendo do seu tema, pode ser um ID ou uma classe. Se a sua ID da barra lateral é #main-sidebar, então você pode usar algum CSS como este:
#main-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
Se, em vez disso, o seu tema usar uma classe, você usaria algo assim:
.main-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
Mas o que exatamente isso faz? Vamos passar por isso peça por peça.
Posição -webkit-sticky: isso é necessário para os navegadores de internet do Safari.
Posição: sticky: define a barra lateral para outros navegadores, como o Chrome e o Firefox.
Top é o deslocamento do topo da tela quando a barra lateral entra em seu estado de aderência.
Se você quiser 15 pixels de espaço entre o seu cabeçalho e a barra lateral que você usaria top: 15px;
A posição fixa nunca funcionou no Chrome, mas foi recentemente adicionada e funciona perfeitamente. Posicionamento aderente funciona no Chrome, Firefox e Safari. Não funciona no Internet Explorer ou no Opera. Para funcionar, você teria que fazer a chamada se a compatibilidade do Internet Explorer é importante para o seu site.
