Position: Sticky Element not being Sticky In Example

问题

I am trying to make a sticky element (the one with id "sidebar") however, despite checking solutions presented here, I have not been able to make the element sticky in major browsers.

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>

My intended behavior is that the red bar, upon reaching the top of the screen, stays at the top of the screen when scrolling down (thus having the behavior of a sticky element with top: 0).

回答1:

The issue is the float element. You made the height of the float element to be 1000px but since it's removed from the normal flow its parent element has a height equal to the height of the sidebar so you won't see any stick effect. Move the big height to .body and the sidebar will become sticky:

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>

来源：https://stackoverflow.com/questions/52488662/position-sticky-element-not-being-sticky-in-example