How do I make a <div> scroll with the screen HTML?

Question

I am trying to get a top block to stay in the same position on the page as I scroll up/down. Other questions similar to this one suggest position: fixed; would solve the issue but it doesn't. Any suggestions? Thanks

HTML

<div class="topBorder boxShadow">

 <h1><b>Matt</b></h1>

<ul class="nav nav-pills pillStyle">
 <li role="presentation" class="active">
 <a href="#">ABOUT</a></li>
 <li role="presentation">
 <a href="#">PORTFOLIO</a></li>
 <li role="presentation">
 <a href="#">CONTACT</a></li>
  </ul>

</div>

CSS

.topBorder {
  background-color: #00b6ff;
  height: 90px;
  padding-top: 1px;
  -webkit-box-shadow: 0 0 8px 0 black;
  position: fixed;
 }

 h1 {
  font-family: 'Rubik'
  color: white;
  padding-top: 4px;
  padding-left: 100px;
  margin-bottom: 0px;
  float: left;
 }

 .pillStyle {
  font-family: 'Ubuntu';
  font-size: 18px;
  padding-top: 23px;
  padding-left: 660px;
  float: left;
 }

Answer 1

To use position: fixed; you need to define a place for the element to be affixed to. Assuming you want it against the top of your viewport, that would be top: 0;.

.topBorder {
  background-color: #00b6ff;
  height: 90px;
  padding-top: 1px;
  -webkit-box-shadow: 0 0 8px 0 black;
  position: fixed;
  top: 0;
  z-index: 10;
 }