位置：粘性元素在示例中不粘性

Question

我正在尝试制作一个粘性元素（id 为“sidebar”的元素），尽管检查了here 提供的解决方案，但我无法在主要浏览器中使该元素具有粘性。

body {
  margin: 0;
}

#top {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  border-bottom: solid 1px #B9D9EB;
  width: 100%;
  height: 35px;
  z-index: 3;
}

#logo a {
  font-family: Calibri;
  font-size: 1.5em;
  position: absolute;
  left: 12px;
  top: 0px;
  float: left;
  text-decoration: none;
  color: black;
}

#menu {
  z-index: -1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  right: 0;
  float: right;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  font-family: calibri;
}

li a:hover {
  background-color: red;
  color: white;
}

.body {
  margin: 3%;
}

.article {
  float: left;
  overflow: hidden;
  height: 1000px;
  width: 50%;
}

.title a {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.title a:hover {
  text-decoration: underline;
}

.title a:visited {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.title a:focus {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.title a:focus {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.image {
  height: auto;
  width: auto;
  max-height: 50%;
  max-width: 100%;
}

.beginning {
  position: relative;
  top: -10px;
  font-family: arial;
  font-size: 0.9em;
}

#sidebar {
  background-color: red;
  position: sticky;
  top: 0px;
  /* width: 15px; */
  /* height: 80px; */
  /* float: right; */
}

<div id="container">
  <div class="body">
    <div class="article">
      <h1 class="title">
        <a href="link to article page">Article Title</a></h1>
      <img class="image" src="C:\Users\chira\Pictures\Pictures\Saved Pictures\7ieMiUB.jpg" alt="article image">
      <p class="beginning">Lorem ipsum dolor sit amet, fugit platonem interpretaris sit eu. Ea laoreet insolens temporibus mea. Duo nullam facilisis at, aliquip consulatu philosophia at sit. Ullum vivendo antiopam pri ex, qui ad ipsum debet rationibus, et mediocrem sadipscing
        his. Mei summo essent disputationi an, nisl forensibus efficiendi sea no. Altera fierent accommodare has cu. Assum aperiam voluptaria vel et, has et porro dolor putent. Pro id semper lucilius adversarium, sit nostrum suscipiantur id. Mel an quas
        deserunt imperdiet. Ferri iudico et usu, nec ipsum erant eripuit ad. Illum assum graecis cu vis. Ea sed possim melius deterruisset, an has prima paulo. Quod hendrerit id mea. Populo omnesque corrumpit est et, qualisque imperdiet moderatius duo
        at, suas utinam soleat cu qui. Ei quo congue aliquam impedit, audiam fastidii sed id. Justo doming antiopam sea id, atqui essent nec ex. Oportere scripserit ius cu, cu ferri bonorum molestie eos. Dicit dissentiet te sit. No tota vidisse propriae
        mel, vis omnis feugait reformidans no. Ne essent expetenda vituperatoribus sed, ea modus perpetua quo. Et recusabo argumentum mei, pri homero fierent cu. Nec dicam mollis ne. Vix habeo explicari no. Saperet nominati pertinacia eam no, magna incorrupte
        in sit. Vis aeque labores appareat eu, vim altera sanctus instructior id. Per te alia possit lucilius. Et antiopam persecuti eam, nulla oratio fabulas vis id. Duo ea sint quaeque perpetua..lorem-ipsum.inf Lorem ipsum dolor sit amet, fugit platonem
        interpretaris sit eu. Ea laoreet insolens temporibus mea. Duo nullam facilisis at, aliquip consulatu philosophia at sit. Ullum vivendo antiopam pri ex, qui ad ipsum debet rationibus, et mediocrem sadipscing his. Mei summo essent disputationi an,
        nisl forensibus efficiendi sea no. Altera fierent accommodare has cu. Assum aperiam voluptaria vel et, has et porro dolor putent. Pro id semper lucilius adversarium, sit nostrum suscipiantur id. Mel an quas deserunt imperdiet. Ferri iudico et
        usu, nec ipsum erant eripuit ad. Illum assum graecis cu vis. Ea sed possim melius deterruisset, an has prima paulo. Quod hendrerit id mea. Populo omnesque corrumpit est et, qualisque imperdiet moderatius duo at, suas utinam soleat cu qui. Ei quo
        congue aliquam impedit, audiam fastidii sed id. Justo doming antiopam sea id, atqui essent nec ex. Oportere scripserit ius cu, cu ferri bonorum molestie eos. Dicit dissentiet te sit. No tota vidisse propriae mel, vis omnis feugait reformidans
        no. Ne essent expetenda vituperatoribus sed, ea modus perpetua quo. Et recusabo argumentum mei, pri homero fierent cu. Nec dicam mollis ne. Vix habeo explicari no. Saperet nominati pertinacia eam no, magna incorrupte in sit. Vis aeque labores
        appareat eu, vim altera sanctus instructior id. Per te alia possit lucilius. Et antiopam persecuti eam, nulla oratio fabulas vis id. Duo ea sint quaeque perpetua..lorem-ipsum.infoo</p>
    </div>

    <div id="sidebar">
      My side bar
    </div>
  </div>

</div>

我的预期行为是红色条在到达屏幕顶部时，在向下滚动时停留在屏幕顶部（因此具有顶部为 0 的粘性元素的行为）。

Answer 1

问题在于浮动元素。您将浮动元素的高度设置为1000px，但由于它已从正常流程中移除，因此其父元素的高度等于侧边栏的高度，因此您不会看到任何粘滞效果。将大高度移到.body，侧边栏会变粘：

body {
  margin: 0;
}

#top {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  border-bottom: solid 1px #B9D9EB;
  width: 100%;
  height: 35px;
  z-index: 3;
}



.body {
  margin: 3%;
  height: 1000px;
}

.article {
  float: left;
  width: 50%;
}

.title a {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.title a:hover {
  text-decoration: underline;
}

.title a:visited {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.title a:focus {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.title a:focus {
  font-family: Arial;
  color: black;
  text-decoration: none;
}

.image {
  height: auto;
  width: auto;
  max-height: 50%;
  max-width: 100%;
}

.beginning {
  position: relative;
  top: -10px;
  font-family: arial;
  font-size: 0.9em;
}

#sidebar {
  background-color: red;
  position: sticky;
  top: 0px;
  /* width: 15px; */
  /* height: 80px; */
  /* float: right; */
}

<div id="container">
  <div class="body">
    <div class="article">
      <h1 class="title">
        <a href="link to article page">Article Title</a></h1>
      <img class="image" src="C:\Users\chira\Pictures\Pictures\Saved Pictures\7ieMiUB.jpg" alt="article image">
      <p class="beginning">Lorem ipsum dolor sit amet, fugit platonem interpretaris sit eu. Ea laoreet insolens temporibus mea. Duo nullam facilisis at, aliquip consulatu philosophia at sit. Ullum vivendo antiopam pri ex, qui ad ipsum debet rationibus, et mediocrem sadipscing
        his. Mei summo essent disputationi an, nisl forensibus efficiendi sea no. Altera fierent accommodare has cu. Assum aperiam voluptaria vel et, has et porro dolor putent. Pro id semper lucilius adversarium, sit nostrum suscipiantur id. Mel an quas
        deserunt imperdiet. Ferri iudico et usu, nec ipsum erant eripuit ad. Illum assum graecis cu vis. Ea sed possim melius deterruisset, an has prima paulo. Quod hendrerit id mea. Populo omnesque corrumpit est et, qualisque imperdiet moderatius duo
        at, suas utinam soleat cu qui. Ei quo congue aliquam impedit, audiam fastidii sed id. Justo doming antiopam sea id, atqui essent nec ex. Oportere scripserit ius cu, cu ferri bonorum molestie eos. Dicit dissentiet te sit. No tota vidisse propriae
        mel, vis omnis feugait reformidans no. Ne essent expetenda vituperatoribus sed, ea modus perpetua quo. Et recusabo argumentum mei, pri homero fierent cu. Nec dicam mollis ne. Vix habeo explicari no. Saperet nominati pertinacia eam no, magna incorrupte
        in sit. Vis aeque labores appareat eu, vim altera sanctus instructior id. Per te alia possit lucilius. Et antiopam persecuti eam, nulla oratio fabulas vis id. Duo ea sint quaeque perpetua..lorem-ipsum.inf Lorem ipsum dolor sit amet, fugit platonem
        interpretaris sit eu. Ea laoreet insolens temporibus mea. Duo nullam facilisis at, aliquip consulatu philosophia at sit. Ullum vivendo antiopam pri ex, qui ad ipsum debet rationibus, et mediocrem sadipscing his. Mei summo essent disputationi an,
        nisl forensibus efficiendi sea no. Altera fierent accommodare has cu. Assum aperiam voluptaria vel et, has et porro dolor putent. Pro id semper lucilius adversarium, sit nostrum suscipiantur id. Mel an quas deserunt imperdiet. Ferri iudico et
        usu, nec ipsum erant eripuit ad. Illum assum graecis cu vis. Ea sed possim melius deterruisset, an has prima paulo. Quod hendrerit id mea. Populo omnesque corrumpit est et, qualisque imperdiet moderatius duo at, suas utinam soleat cu qui. Ei quo
        congue aliquam impedit, audiam fastidii sed id. Justo doming antiopam sea id, atqui essent nec ex. Oportere scripserit ius cu, cu ferri bonorum molestie eos. Dicit dissentiet te sit. No tota vidisse propriae mel, vis omnis feugait reformidans
        no. Ne essent expetenda vituperatoribus sed, ea modus perpetua quo. Et recusabo argumentum mei, pri homero fierent cu. Nec dicam mollis ne. Vix habeo explicari no. Saperet nominati pertinacia eam no, magna incorrupte in sit. Vis aeque labores
        appareat eu, vim altera sanctus instructior id. Per te alia possit lucilius. Et antiopam persecuti eam, nulla oratio fabulas vis id. Duo ea sint quaeque perpetua..lorem-ipsum.infoo</p>
    </div>

    <div id="sidebar">
      My side bar
    </div>
  </div>

</div>