添加位置时滚动消失:固定;到标题



我正在制作一个网站,在尝试修复标题以在滚动时保持在页面顶部时遇到了很多麻烦。但是当我尝试添加位置:固定时;滚动条消失。我尝试做各种在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>

问题是您缺少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>

这里的问题是,当将 position:fixed 应用于一个元素时 - 它会将其从页面流中取出,并且页面呈现得好像它不存在一样(i - DOM 中的下一个元素将是固定元素顶部的位置。这将影响页面的高度 - 如果它现在小于视口 - 则不需要滚动条。对此有两种解决方案 - 首先您需要将填充顶部应用于正文(等于固定元素的高度 t0(,这将使页面元素向下以从固定项目的末尾开始。

第二种解决方案是应用正文 {overflow:scroll} 样式规则以始终强制滚动条存在。感谢@Bhuwan Bhatt的片段。

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>

最新更新