Позиция: Липкий Элемент не Липкий В Примере

Question

Я пытаюсь сделать залипающий элемент (тот, что с идентификатором "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 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.Вы сделали высоту элемента с плавающей точкой равной 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>