How do I create a div that has "0 parallax"?

Question

How do I create a div that has "0 parallax"?

Navigation

#1 by (3 votes)

0

I'm creating a website, and I want to make a div that works the same as the Stack Overflow bar (like the one in the image), that is, a div that does not slip when scrolling the page. I would like to know how to do this. Thank you very much in advance.

html

asked by anonymous 07.06.2017 / 00:08

1 answer

Resolve error Value of 'X' is not valid for 'SelectedIndex', where X is any Index value Can I use an iPhone to test a Xamarin app?

score 3 · Accepted Answer

You 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
}