Estou criando um site, e quero fazer uma div em que funcione igual a barra do Stack Overflow (como a da imagem), ou seja, uma div que não saia do lugar ao dar scroll na página. Gostaria de saber como fazer isso. Desde já, agradeço.
1 Resposta
Pode utilizar position: fixed
:
.navbar-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #212121;
padding: 5px;
}
.content {
margin-top: 25px;
padding: 5px;
}
<nav class="navbar-fixed">
<input type="search" placeholder="Buscar"/>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus volutpat placerat. Integer eu vehicula mauris. Morbi ut dolor maximus velit dapibus volutpat. Sed eleifend iaculis diam, eu euismod felis consequat sit amet. Aliquam dapibus tristique felis, facilisis ultrices tellus interdum et. Cras vestibulum, metus sit amet iaculis suscipit, sapien justo pharetra mauris, quis faucibus purus arcu at est. In dui libero, finibus non neque sed, mollis feugiat erat. Nunc ut odio tellus. In eu pellentesque massa, quis molestie purus.
Aliquam erat volutpat. Nullam vulputate sagittis risus, at mollis ipsum rhoncus non. Vivamus orci metus, posuere eget leo ut, tincidunt egestas nunc. Cras pellentesque ullamcorper sem, eu posuere risus ultricies eu. Nulla quis volutpat massa. Integer vel odio bibendum, suscipit orci at, blandit massa. Nullam rutrum arcu id dapibus sodales. Quisque eget nunc sed nunc tempus bibendum.
Etiam tempor turpis dapibus purus luctus pulvinar. Fusce non sapien ut erat feugiat dignissim vitae mattis purus. Phasellus vitae fringilla ligula. Aenean semper eleifend ligula, vel consequat ante pretium in. Nulla semper bibendum enim nec gravida. Donec nulla erat, vehicula quis lorem ac, laoreet consectetur mi. Mauris urna mi, pulvinar sed dolor vitae, venenatis egestas elit. Maecenas at luctus ex. Aliquam vel sem facilisis, rutrum augue id, placerat lacus. Quisque ullamcorper fermentum malesuada. Proin sed elit faucibus, porttitor nibh quis, interdum massa.
In non velit vitae massa consectetur tempus. Praesent et posuere ex, id tincidunt purus. Maecenas feugiat at nulla in condimentum. Proin elementum quam eget porta congue. Nam faucibus libero at massa viverra malesuada. Cras turpis odio, consequat non lectus vitae, placerat suscipit enim. Nullam et pulvinar ligula, a vehicula ex. Duis accumsan, neque in pulvinar tincidunt, justo mi semper nisl, at iaculis ante nulla ac neque. Praesent quam odio, varius eget gravida ut, egestas sed odio. Proin facilisis enim ante, et vulputate elit porta nec.
Vivamus tincidunt erat augue, ut dictum felis convallis et. Aliquam sem sapien, convallis ac lorem vel, eleifend rhoncus lorem. Etiam mattis purus purus, et dapibus est lobortis fringilla. Morbi molestie in nisl vel dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ex non lacinia egestas. Fusce viverra quam ut orci mollis, vel blandit metus lacinia. Quisque sed malesuada arcu. Nulla iaculis nibh sed nisi hendrerit vehicula. Vestibulum et elementum nibh. In dictum velit at libero sollicitudin blandit. Nam consequat ligula luctus tempor semper.
</div>
.navbar-fixed {
position: fixed; //Deixa o elemento fixo
top: 0; //O elemento fica colado no topo da página
left: 0; //O elemento fica colado na lateral da página
width: 100%; //O elemento tem largura de 100%
background-color: #212121; //Cor de fundo
padding: 5px; //Espaçamento interno
}
-
1Excelente, quando tiver um tempo explique sobre o comportamento do
display: block
em elemento composition
(o que faz ser necessário owidth:100%;
), pro AP é apenas um adicional, mas para futuros visitantes acho que seria um detalhe muito bom. Já deixei o +1 ;)– Syzoth ♦Commented 6/06/2017 às 22:32
position:fixed
mas tem outras, considere fazer um tour para aproveitar melhor o site. Boa Sorte.