html – The block does not appear after using sticky.

Here I have a page.

<div class="article-wrapper">

<div class="sidemenu-shares">
  <div class="rectangle">
  </div>
</div>

<div class="main-banner">
<h1>Title</h1>
</div>

//And many other blocks

</div>

<footer>
  Footer...
</footer>

I have one such block here. sidemenu-shares, It is set to the right of the page, and scrolls to the very end.

.sidemenu-shares {
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  flex-wrap: nowrap;
  gap: 40px;
}

But the problem is that it crawls into the footer, which I don’t want, so there’s a way to use it. position: sticky;

And in theory, this block should reach the footer, and not move forward or climb into it.

But when I paste. sticky inside me css This block is not fixed throughout the page, but only stands at the beginning of the page, what could be the problem?

Ready to provide if you need additional data. If that development environment Laravel

Here is an example of how it should work, but for some reason this sidebar block is not placed on the right for me, but remains as a regular block at the beginning of the page.

/* The important part: */

.sidebar {
  float: right;
  position: sticky;
  top: 8px; /* This should match the top margin/padding on the body */
}


/* Cosmetics for the demo: */

.main-content {
  min-height: 200vh;
}
.main-content p:first-of-type {
  margin-top: 0;
}

.sidebar {
  width: 25vw;
  min-height: 25vh;
  background-color: #a00;
}

footer {
  min-height: 100vh;
  background-color: #eee;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 8px;
}
<div class="main-content">
  <div class="sidebar">
    Sidebar...
  </div>
  <div>Main content...</div>
  <div>Main content...</div>
  <div>Main content...</div>
  <div>Main content...</div>
  <div>Main content...</div>
</div>
<footer>
  Footer...
</footer>

Write a Comment