it-roy-ru.com

положение: липкое внизу слева

Я только что играл в FF32 и Safari 7 с position: sticky. И он прекрасно работает с top: 0px или left: 0px (чтобы придерживаться горизонтально), но, кажется, он не работает, когда я пытаюсь bottom: 0px или даже лучше, объединить bottom: 0; left: 0 он не устанавливает себя в нижней части элемента. Это поведение может быть опробовано здесь: http://html5-demos.appspot.com/static/css/sticky.html , просто изменив атрибут top: 10px на bottom: 0. Разве это не должно работать?

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

В любом случае, любые предложения и дополнительная информация приветствуются.

14
Markus
position: sticky;
bottom: 30px;

работает. Имейте в виду, что элементы sticky относятся к своим родителям.

http://codepen.io/corysimmons/pen/QyBMXN?editors=1100 (в Firefox)

В этом случае <section> (синяя область) является родителем.

Это не работает с Stickyfill, хотя https://github.com/wilddeer/stickyfill#what-it-doesnt

Я предлагаю вам поиграть с этим немного дольше, пока вы не освоитесь.

Дайте мне знать, если вам нужен плагин JS, который будет вести себя как position: sticky без необходимости использовать position: sticky (хотя не могу дождаться поддержки браузера или более сильного полифилла).

11
corysimmons

Подумать об элементе с помощью position: sticky можно следующим образом:

«Элемент, имеющий position: sticky, всегда должен оставаться на своем обычном месте внутри своего родителя, ЕСЛИ указанное нормальное место выходит за пределы области просмотра, и в этом случае прикрепленный элемент должен быть зафиксирован относительно области просмотра. Все ставки отключены, если родительский контейнер также покидает область просмотра, и в этом случае липкие элементы прокручиваются вместе с ним ".

Этот Codepen очень хорошо иллюстрирует это. Обратите внимание, как красное поле остается на своем обычном месте, пока родительское синее поле находится в обычном представлении. Однако, когда вы прокручиваете так, что красное поле начинает выходить из области просмотра, оно исправляется. Наконец, когда синий родитель полностью прокручивается из поля зрения, красное поле также исчезает. 

* {
  box-sizing: border-box;
  }

body {
  height: 3000px;
  padding: 3rem;
}

section {
  background: dodgerblue;
  color: white;
  line-height: 1.5;
  padding: 30px;
  }
  
div {
  display: block;
  width: 100px;
  height: 100px;
  background: tomato;
  position: sticky;
  bottom: 30px;
  }
<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
  </p>
  <div></div>
</section>

4
rayray

Если вы знаете высоту липкого элемента, вы можете использовать что-то вроде этого:

.sticky-element {
  position: sticky;
  top: calc(100vh - 50px);
}

Это также будет работать с Stickyfill. Не уверен насчет поддержки браузера.

1
cbaigorri