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

时间:2018-01-07 06:40:34

标签: html css html5

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

2 个答案:

答案 0 :(得分:1)

问题在于您错过了 div 的结束 topBlack-container 。关闭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>

答案 1 :(得分:0)

这里的问题是当应用位置:固定到一个元素时 - 它将它从页面流中取出,并且页面被渲染为好像它不存在(i - DOM中的下一个元素将位于固定元素的顶部。这将影响页面的高度 - 如果它现在小于视口 - 不需要滚动条。有两个解决方案 - 首先你需要应用padding-top到body(等于t0固定元素的高度),它将页面元素向下移动以从固定项目的末尾开始。

第二个解决方案是应用body {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>