Блог

Главная - Вопросы по программированию - Позиция sticky не работает без переполнения и с верхом?

Позиция sticky не работает без переполнения и с верхом?

#html #css

Вопрос:

Я создаю целый сайт с общим макетом, где слева есть липкий div (меню в стороне). Этот div должен быть липким, чтобы он не переопределял нижний колонтитул внизу, но его свойство не работает.

Поэтому я искал везде, чтобы найти решение: переполнение, сверху-снизу-слева-справа. Я искал overflow их в любом из родителей меню «В стороне» также со сценарием, но не нашел ни одного.

 <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>
 
 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;
}

Ответ №1:

У вас есть пара проблем:

  1. Вы устанавливаете height: 100% на #menu элемент. Поскольку вы не задаете высоту row , элемент не имеет никакого отношения к тому, что означает 100%. Таким образом, это делает #menu элемент высотой его содержимого, а не контейнером. Это главная причина, по которой вы не видите sticky работу.
  2. Это не влияет на элемент, но вы можете удалить float: left и display: block на #menu элементе. Они ничего не сделают, так как это дочерний элемент flex, и по умолчанию aside элемент является элементом блока.
  3. Вы должны использовать flex свойство для определения grow shrink and basis свойств для вашего #menu и 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>

Комментарии:

1. большое вам спасибо, вы решили эту проблему! Я запомню пункты, которые вы мне предложили :3 но где я могу узнать больше ? flex: grow shrink and basis Я никогда ничего не видел об этих атрибутах :/

2. @Seintian flex: value value value -это короткая рука flex-grow , flex-shrink и flex-basis в таком порядке. Отличный ресурс: css-tricks.com/snippets/css/a-guide-to-flexbox

Метки: