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

Position: Sticky Element not being Sticky In Example

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

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 PicturesieMiUB.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>

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

问题出在浮动元素上。您将浮动元素的高度设置为 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 PicturesieMiUB.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>