Положение: липкое до нижнего левого

Ответ 1

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 (хотя не могу дождаться поддержки браузера или более сильного полифилла).

Ответ 2

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

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

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

* {
  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>

Ответ 3

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

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

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

Ответ 4

body {
  min-width: 600px;
  min-height: 400px;
}

.container {
  background-color: #9588c170;
  /* , */
  position: absolute;
  width: 100%;
  height: 100%;
  /* overflow: scroll; */
  overflow: auto;
}

.sticky {
  width: 300px;
  height: 200px;
  background-color: #9588c1;
  /* , */
  position: sticky;
  left: 1000px;
  top: 900px;
}

<div class="container">
  <div class="sticky">div</div>
</div>

Ответ 5

position:sticky; не поддерживает кросс-браузер. Посмотрите этот, чтобы узнать, какие значения вы можете указать в противном случае

Из приведенной выше ссылки:

Значения свойств

• static: значение по умолчанию. Элементы визуализируются в порядке, поскольку они отображаются в потоке документа.
• absolute: элемент позиционируется относительно его первого позиционированного (не статического) элемента предка
• fixed: элемент расположен относительно окна браузера
• relative: Элемент расположен относительно его нормального положения, поэтому "left: 20" добавляет 20 пикселей к элементу LEFT
  положение
• initial: Устанавливает это свойство по умолчанию. Читайте об начальных
• inherit: Наследует это свойство от его родительского элемента. Читайте о наследовании

Если вы хотите что-то в нижней части родительского контейнера, у вас есть 2 варианта.

• Первый заключается в том, чтобы просто упорядочить ваши элементы, чтобы этот конкретный элемент был последним дочерним элементом его родителя (если вы не установите свойство position, его значение по умолчанию будет использоваться: position:relative;).
• Второй вариант - использовать position:absolute;, а затем установить свойства слева, справа, сверху и снизу.

Другая опция (если вы хотите, чтобы этот элемент оставался на экране в одном и том же месте навсегда - если вы не добавите js для изменения его свойств) следует использовать position:fixed;, а затем снова установить слева, справа, сверху и свойства дна

Отметьте этот, чтобы просмотреть различия между параметрами

Если вам нужен гибрид между обеими этими функциями, вы можете использовать JavaScript/jQuery для достижения этого, используя события прокрутки. Этот метод (скорее всего) имел бы кросс-браузерную поддержку.

Ответ 6

со следующим html:

<div id="bottom-left">I'm in the bottom left!</div>

и следующий css:

#bottom-left {
    width: 250px;
    height: 250px;
    color: #fff;
    background-color: #000;
    position: fixed;
    bottom: 0;
   left: 0;
}

у вас должен быть липкий div в нижнем левом углу страницы

Пример: http://jsfiddle.net/wjxws9hy/