css - 添加位置时滚动消失 :fixed; to the header

Question

我正在制作一个网站，但在尝试修复我的页眉以使其在滚动时保留在页面顶部时遇到了很多麻烦。但是当我尝试添加 position:fixed;滚动条消失。我尝试了在 StackOverflow 和许多其他地方找到的各种解决方案，但都行不通。

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

问题是您缺少 topBlack-container 的结束 div。关闭 div，它将正常工作。

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>