Eu vou mostrar como criar uma barra lateral flutuante para seu site, apenas com algumas linhas de CSS. Ela pode não ser a melhor maneira de ter uma barra lateral flutuante, mas é leve e não usa nenhum recurso a mais para carregar o site.
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.
Exemplo de barra lateral flutuante com CSS
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.
Outra forma de criar barra lateral flutuante apenas com CSS
Eu encontrei este exemplo, que pode funcionar para você. Eu tentei em dois temas e ele funcionou apenas em um deles. SE você tiver sorte, será contemplado com um curto CSS e uma bela barra lateral flutuante.
Basta colar o código a seguir e mudar as classes para o nome das classes de CSS de sua barra lateral.
@media only screen and (min-width: 1024px) {
.content-sidebar-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.sidebar-primary .widget:last-child {
position: -webkit-sticky;
position: sticky;
top: 40px;
}
.admin-bar .sidebar-primary .widget:last-child {
top: 72px;
}
}
Você pode ter um tema que não seja compatível com esta classe de CSS, para este caso é melhor utilizar um plugin.
Existem vários plugins de Sidebar Sticky, mas eu fiz testes com dois:
- WP Sticky Sidebar - este fixa a barra lateral e principalmente o último Widget da lateral
- Q2W3 Fixed Widget for WordPress - este é mais completo e fixa o Widget que você escolher, porém carrega mais scripts e eu notei um pequeno atraso no carregamento do site. Mas se você tem um plugin de cache, pode funcionar bem.
É isso, se você gostou deixe seu comentário, ou se não conseguiu, deixe-me saber o que aconteceu.
