Why "position: sticky" is not working without any overflow and with top?

user_14661091 0
Viewed 95

I'm making an entire site with a common layout where, at left, there is a sticky div (aside menu). That div has to be sticky so it won't override the footer in the bottom, but its property doesn't work.

So I searched everywhere to find a solution: overflow, top-bottom-left-right. I searched for any overflow in any of the parents of the aside menu also with a script but I found none.

div.row {
  display: flex;
  padding-top: 3em;
}
aside#menu {
  display: block;
  flex: initial;
  width: 250px;
  min-width: 150px;
  margin: 0;
  font-size: 1rem;
  height: 100%;
  padding: 1rem;
  position: relative;
  float: left;
}
article {
  flex: 1;
}
aside#menu div.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
<div class="row">
  <aside id="menu">
    <div class="sticky" id="sticky">
      <h2>Variabili</h2>
      <a href="variables.html#variables">Tipi di variabili</a>
      <a href="variables.html#var_scopes">Variabili locali e globali</a>
      <h2>Funzioni</h2>
      <a href="functions.html">Funzioni</a>
      <h2>Classi</h2>
      <a href="classes.html">Classi</a>
    </div>
  </aside>
  <article>
    <div id="variables" class="content">
    </div>
    <div id="var_scopes" class="content">
    </div>
  </article>
</div>
<footer>
</footer>

css html
1 Answers

You have a couple issues:

  1. You set height: 100% on the #menu element. Since you don't set a height on the row, the element has no reference to what 100% means. So, it makes the #menu element the height of its content and not the container. That's the main reason you aren't seeing the sticky work.
  2. This doesn't affect the element, but you can remove float: left and display: block on the #menu element. Those will do nothing, since it's a flex child and by default, an aside element is a block element.
  3. You should use the flex property to define the grow shrink and basis properties for your #menu and article.

div.row {
  display: flex;
  padding-top: 3em;
}

#menu {
  flex: 1 1 250px;
  min-width: 150px;
  margin: 0;
  font-size: 1rem;
  padding: 1rem;
  position: relative;
}

article {
  flex: 1 1 auto;
}

#menu div.sticky {
  position: sticky;
  top: 0;
}

footer {
  height: 50px;
  background: yellow;
}
<div class="row">
  <aside id="menu">
    <div class="sticky" id="sticky">
      <h2>Variabili</h2>
      <a href="variables.html#variables">Tipi di variabili</a>
      <a href="variables.html#var_scopes">Variabili locali e globali</a>
      <h2>Funzioni</h2>
      <a href="functions.html">Funzioni</a>
      <h2>Classi</h2>
      <a href="classes.html">Classi</a>
    </div>
  </aside>
  <article>
    <div id="variables" class="content">
      <p>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui
        nullam. Consequat luctus tempus.</p>

      <p>Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo
        mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id.
        Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.</p>

      <p>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui
        nullam. Consequat luctus tempus.</p>

      <p>Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo
        mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id.
        Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.</p>

      <p>Pharetra eros mi eros accumsan dui. Pellentesque ipsum iaculis. Mi neque in nonummy venenatis vestibulum. Class egestas adipiscing nisl tellus quam ut in amet. Nostra nunc leo lorem eget ipsum elit eget metus nam sed pede. Nam nibh risus sit dui
        nullam. Consequat luctus tempus.</p>

      <p>Pede tellus eu mattis morbi donec. Natoque class leo. Ac lacus vestibulum ac odio ac. Risus lorem mauris. Proin enim tortor at erat dui. Aliquam magna condimentum. Orci donec morbi. Id justo at malesuada erat nulla urna quam eu nec elit commodo
        mi voluptatum gravida ante bibendum justo. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Phasellus malesuada adipiscing qui et eu. Justo egestas erat auctor sagittis sed nonummy amet dolor et in id.
        Ut blandit justo. Donec fringilla cursus enim velit ullamcorper.</p>
    </div>
    <div id="var_scopes" class="content">

    </div>
  </article>
</div>
<footer>

</footer>

user_11721890
Related