Scroll disappears when adding position:fixed; to the header

Question

I'm making a website and I'm having so much trouble trying to fix my header to remain at the top of the page when scrolling. But when I try to add position:fixed; the scroll bar disappears. I tried doing a variety of solutions found on StackOverflow and many other places, but it just doesn't work.

body {
  padding: 0;
  margin-top: 35px;
  overflow: scroll;
}

.topBlack-container {
  background-color: #333333;
  height: 35px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.topBlack-contents {
  background-color: #333333;
  margin: 0 auto;
  max-width: 1050px;
  border-color: blue;
  height: 35px;
}

.list-contents {
  float: right;
  padding-top: 7px;
  padding-right: 7px;
}

.list-contents a {
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-family: "Arial";
  color: white;
  padding-left: 20px;
  margin-top: 5px;
}

.list-contents a:hover {
  text-decoration: underline;
  text-align: center;
  font-size: 12px;
  font-family: "Arial"l color: white;
  padding-left: 20px;
  margin-top: 5px;
}

<!-- black top bar start -->
<div class="topBlack-container">
  <div class="topBlack-contents">
    <img src="open-book (2).svg" alt="logo" width="32px" style="padding-left: 7px; padding-top: 0.5px;">
    <div class="list-contents">
      <a href="home">Home</a>
      <a href="About">About</a>
      <a href="Contact">Contact Us</a>
    </div>
  </div>
<!-- black top bar end -->
<div class="container">

  <p> Inquietude simplicity terminated she compliment remarkably few her nay. The weeks are ham asked jokes. Neglected perceived shy nay concluded. Not mile draw plan snug next all. Houses latter an valley be indeed wished merely in my. Money doubt oh drawn
    every or an china. Visited out friends for expense message set eat. Woody equal ask saw sir weeks aware decay. Entrance prospect removing we packages strictly is no smallest he. For hopes may chief get hours day rooms. Oh no turned behind polite piqued
    enough at. Forbade few through inquiry blushes you. Cousin no itself eldest it in dinner latter missed no. Boisterous estimating interested collecting get conviction friendship say boy. Him mrs shy article smiling respect opinion excited. Welcomed
    humoured rejoiced peculiar to in an. Two exquisite objection delighted deficient yet its contained. Cordial because are account evident its subject but eat. Can properly followed learning prepared you doubtful yet him. Over many our good lady feet
    ask that. Expenses own moderate day fat trifling stronger sir domestic feelings. Itself at be answer always exeter up do. Though or my plenty uneasy do. Friendship so considered remarkably be to sentiments. Offered mention greater fifteen one promise
    because nor. Why denoting speaking fat indulged saw dwelling raillery. An so vulgar to on points wanted. Not rapturous resolving continued household northward gay. He it otherwise supported instantly. Unfeeling agreeable suffering it on smallness
    newspaper be. So come must time no as. Do on unpleasing possession as of unreserved. Yet joy exquisite put sometimes enjoyment perpetual now. Behind lovers eat having length horses vanity say had its. In as name to here them deny wise this. As rapid
    woody my he me which. Men but they fail shew just wish next put. Led all visitor musical calling nor her. Within coming figure sex things are. Pretended concluded did repulsive education smallness yet yet described. Had country man his pressed shewing.
    No gate dare rose he. Eyes year if miss he as upon. Unwilling sportsmen he in questions september therefore described so. Attacks may set few believe moments was. Reasonably how possession shy way introduced age inquietude. Missed he engage no exeter
    of. Still tried means we aware order among on. Eldest father can design tastes did joy settle. Roused future he ye an marked. Arose mr rapid in so vexed words. Gay welcome led add lasting chiefly say looking. Game of as rest time eyes with of this
    it. Add was music merry any truth since going. Happiness she ham but instantly put departure propriety. She amiable all without say spirits shy clothes morning. Frankness in extensive to belonging improving so certainty. Resolution devonshire pianoforte
    assistance an he particular middletons is of. Explain ten man uncivil engaged conduct. Am likewise betrayed as declared absolute do. Taste oh spoke about no solid of hills up shade. Occasion so bachelor humoured striking by attended doubtful be it.
    Literature admiration frequently indulgence announcing are who you her. Was least quick after six. So it yourself repeated together cheerful. Neither it cordial so painful picture studied if. Sex him position doubtful resolved boy expenses. Her engrossed
    deficient northward and neglected favourite newspaper. But use peculiar produced concerns ten. Do to be agreeable conveying oh assurance. Wicket longer admire do barton vanity itself do in it. Preferred to sportsmen it engrossed listening. Park gate
    sell they west hard for the. Abode stuff noisy manor blush yet the far. Up colonel so between removed so do. Years use place decay sex worth drift age. Men lasting out end article express fortune demands own charmed. About are are money ask how seven.
    Ignorant branched humanity led now marianne too strongly entrance. Rose to shew bore no ye of paid rent form. Old design are dinner better nearer silent excuse. She which are maids boy sense her shade. Considered reasonable we affronting on expression
    in. So cordial anxious mr delight. Shot his has must wish from sell nay. Remark fat set why are sudden depend change entire wanted. Performed remainder attending led fat residence far.

</div>

Answer 1

The issue here is that when apply position:fixed to an element - it takes it out of the page flow and the page is rendered as if it wasn't there (i - the next element in the DOM will be position at the top of the fixed element. This will affect the height of the page - and if it is now less than the viewport - the scroll bar is not needed. There are two solutions to this - first you need to apply padding-top to the body (equal t0 the height of the fixed element) which will bring the page elements down to start at the end of the fixed item.

The second solution is to apply a body {overflow:scroll} style rule to always force the scroll bar to be present. Thanks to @Bhuwan Bhatt for the snippet.

body {
  padding-top: 35px;
  overflow: scroll;
}

.topBlack-container {
  background-color: #333333;
  height: 35px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.topBlack-contents {
  background-color: #333333;
  margin: 0 auto;
  max-width: 1050px;
  border-color: blue;
  height: 35px;
}

.list-contents {
  float: right;
  padding-top: 7px;
  padding-right: 7px;
}

.list-contents a {
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-family: "Arial";
  color: white;
  padding-left: 20px;
  margin-top: 5px;
}

.list-contents a:hover {
  text-decoration: underline;
  text-align: center;
  font-size: 12px;
  font-family: "Arial"l color: white;
  padding-left: 20px;
  margin-top: 5px;
}

<!-- black top bar start -->
<div class="topBlack-container">
  <div class="topBlack-contents">
    <img src="open-book (2).svg" alt="logo" width="32px" style="padding-left: 7px; padding-top: 0.5px;">
    <div class="list-contents">
      <a href="home">Home</a>
      <a href="About">About</a>
      <a href="Contact">Contact Us</a>
    </div>
  </div>
</div>
<!-- black top bar end -->
<div class="container">

  <p> Inquietude simplicity terminated she compliment remarkably few her nay. The weeks are ham asked jokes. Neglected perceived shy nay concluded. Not mile draw plan snug next all. Houses latter an valley be indeed wished merely in my. Money doubt oh drawn
    every or an china. Visited out friends for expense message set eat. Woody equal ask saw sir weeks aware decay. Entrance prospect removing we packages strictly is no smallest he. For hopes may chief get hours day rooms. Oh no turned behind polite piqued
    enough at. Forbade few through inquiry blushes you. Cousin no itself eldest it in dinner latter missed no. Boisterous estimating interested collecting get conviction friendship say boy. Him mrs shy article smiling respect opinion excited. Welcomed
    humoured rejoiced peculiar to in an. Two exquisite objection delighted deficient yet its contained. Cordial because are account evident its subject but eat. Can properly followed learning prepared you doubtful yet him. Over many our good lady feet
    ask that. Expenses own moderate day fat trifling stronger sir domestic feelings. Itself at be answer always exeter up do. Though or my plenty uneasy do. Friendship so considered remarkably be to sentiments. Offered mention greater fifteen one promise
    because nor. Why denoting speaking fat indulged saw dwelling raillery. An so vulgar to on points wanted. Not rapturous resolving continued household northward gay. He it otherwise supported instantly. Unfeeling agreeable suffering it on smallness
    newspaper be. So come must time no as. Do on unpleasing possession as of unreserved. Yet joy exquisite put sometimes enjoyment perpetual now. Behind lovers eat having length horses vanity say had its. In as name to here them deny wise this. As rapid
    woody my he me which. Men but they fail shew just wish next put. Led all visitor musical calling nor her. Within coming figure sex things are. Pretended concluded did repulsive education smallness yet yet described. Had country man his pressed shewing.
    No gate dare rose he. Eyes year if miss he as upon. Unwilling sportsmen he in questions september therefore described so. Attacks may set few believe moments was. Reasonably how possession shy way introduced age inquietude. Missed he engage no exeter
    of. Still tried means we aware order among on. Eldest father can design tastes did joy settle. Roused future he ye an marked. Arose mr rapid in so vexed words. Gay welcome led add lasting chiefly say looking. Game of as rest time eyes with of this
    it. Add was music merry any truth since going. Happiness she ham but instantly put departure propriety. She amiable all without say spirits shy clothes morning. Frankness in extensive to belonging improving so certainty. Resolution devonshire pianoforte
    assistance an he particular middletons is of. Explain ten man uncivil engaged conduct. Am likewise betrayed as declared absolute do. Taste oh spoke about no solid of hills up shade. Occasion so bachelor humoured striking by attended doubtful be it.
    Literature admiration frequently indulgence announcing are who you her. Was least quick after six. So it yourself repeated together cheerful. Neither it cordial so painful picture studied if. Sex him position doubtful resolved boy expenses. Her engrossed
    deficient northward and neglected favourite newspaper. But use peculiar produced concerns ten. Do to be agreeable conveying oh assurance. Wicket longer admire do barton vanity itself do in it. Preferred to sportsmen it engrossed listening. Park gate
    sell they west hard for the. Abode stuff noisy manor blush yet the far. Up colonel so between removed so do. Years use place decay sex worth drift age. Men lasting out end article express fortune demands own charmed. About are are money ask how seven.
    Ignorant branched humanity led now marianne too strongly entrance. Rose to shew bore no ye of paid rent form. Old design are dinner better nearer silent excuse. She which are maids boy sense her shade. Considered reasonable we affronting on expression
    in. So cordial anxious mr delight. Shot his has must wish from sell nay. Remark fat set why are sudden depend change entire wanted. Performed remainder attending led fat residence far.

</div>

Answer 2

The problem is that you are missing a closing div for topBlack-container. Close the div and it will work fine.

body {
  padding: 0;
  margin-top: 35px;
  overflow: scroll;
}

.topBlack-container {
  background-color: #333333;
  height: 35px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.topBlack-contents {
  background-color: #333333;
  margin: 0 auto;
  max-width: 1050px;
  border-color: blue;
  height: 35px;
}

.list-contents {
  float: right;
  padding-top: 7px;
  padding-right: 7px;
}

.list-contents a {
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-family: "Arial";
  color: white;
  padding-left: 20px;
  margin-top: 5px;
}

.list-contents a:hover {
  text-decoration: underline;
  text-align: center;
  font-size: 12px;
  font-family: "Arial"l color: white;
  padding-left: 20px;
  margin-top: 5px;
}

<!-- black top bar start -->
<div class="topBlack-container">
  <div class="topBlack-contents">
    <img src="open-book (2).svg" alt="logo" width="32px" style="padding-left: 7px; padding-top: 0.5px;">
    <div class="list-contents">
      <a href="home">Home</a>
      <a href="About">About</a>
      <a href="Contact">Contact Us</a>
    </div>
  </div>
</div>
<!-- black top bar end -->
<div class="container">

  <p> Inquietude simplicity terminated she compliment remarkably few her nay. The weeks are ham asked jokes. Neglected perceived shy nay concluded. Not mile draw plan snug next all. Houses latter an valley be indeed wished merely in my. Money doubt oh drawn
    every or an china. Visited out friends for expense message set eat. Woody equal ask saw sir weeks aware decay. Entrance prospect removing we packages strictly is no smallest he. For hopes may chief get hours day rooms. Oh no turned behind polite piqued
    enough at. Forbade few through inquiry blushes you. Cousin no itself eldest it in dinner latter missed no. Boisterous estimating interested collecting get conviction friendship say boy. Him mrs shy article smiling respect opinion excited. Welcomed
    humoured rejoiced peculiar to in an. Two exquisite objection delighted deficient yet its contained. Cordial because are account evident its subject but eat. Can properly followed learning prepared you doubtful yet him. Over many our good lady feet
    ask that. Expenses own moderate day fat trifling stronger sir domestic feelings. Itself at be answer always exeter up do. Though or my plenty uneasy do. Friendship so considered remarkably be to sentiments. Offered mention greater fifteen one promise
    because nor. Why denoting speaking fat indulged saw dwelling raillery. An so vulgar to on points wanted. Not rapturous resolving continued household northward gay. He it otherwise supported instantly. Unfeeling agreeable suffering it on smallness
    newspaper be. So come must time no as. Do on unpleasing possession as of unreserved. Yet joy exquisite put sometimes enjoyment perpetual now. Behind lovers eat having length horses vanity say had its. In as name to here them deny wise this. As rapid
    woody my he me which. Men but they fail shew just wish next put. Led all visitor musical calling nor her. Within coming figure sex things are. Pretended concluded did repulsive education smallness yet yet described. Had country man his pressed shewing.
    No gate dare rose he. Eyes year if miss he as upon. Unwilling sportsmen he in questions september therefore described so. Attacks may set few believe moments was. Reasonably how possession shy way introduced age inquietude. Missed he engage no exeter
    of. Still tried means we aware order among on. Eldest father can design tastes did joy settle. Roused future he ye an marked. Arose mr rapid in so vexed words. Gay welcome led add lasting chiefly say looking. Game of as rest time eyes with of this
    it. Add was music merry any truth since going. Happiness she ham but instantly put departure propriety. She amiable all without say spirits shy clothes morning. Frankness in extensive to belonging improving so certainty. Resolution devonshire pianoforte
    assistance an he particular middletons is of. Explain ten man uncivil engaged conduct. Am likewise betrayed as declared absolute do. Taste oh spoke about no solid of hills up shade. Occasion so bachelor humoured striking by attended doubtful be it.
    Literature admiration frequently indulgence announcing are who you her. Was least quick after six. So it yourself repeated together cheerful. Neither it cordial so painful picture studied if. Sex him position doubtful resolved boy expenses. Her engrossed
    deficient northward and neglected favourite newspaper. But use peculiar produced concerns ten. Do to be agreeable conveying oh assurance. Wicket longer admire do barton vanity itself do in it. Preferred to sportsmen it engrossed listening. Park gate
    sell they west hard for the. Abode stuff noisy manor blush yet the far. Up colonel so between removed so do. Years use place decay sex worth drift age. Men lasting out end article express fortune demands own charmed. About are are money ask how seven.
    Ignorant branched humanity led now marianne too strongly entrance. Rose to shew bore no ye of paid rent form. Old design are dinner better nearer silent excuse. She which are maids boy sense her shade. Considered reasonable we affronting on expression
    in. So cordial anxious mr delight. Shot his has must wish from sell nay. Remark fat set why are sudden depend change entire wanted. Performed remainder attending led fat residence far.

</div>