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

问题是float元素。您已将float元素的高度设置为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>

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

1 个答案: