0
Can use 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
}
One of the options is to use
position:fixed
but there are others, consider doing a [tour] to better enjoy the site. Good Luck.– MagicHat