Задать вопрос
@test-cats

Как сделать сайдбар плавающим?

Подскажите в чем моя ошибка? Нужно сделать так, чтобы сайдбар плавал на сайте и не заходил на другие блоки такие как шапка и подвал. Делаю с помощью свойства position: sticky, сайдбар перестает плавать. Что не так?

<aside>sidebar</aside>
<div class="container">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod natus magnam ratione dolores officia tempore ut quos sapiente minus inventore, expedita, dolorum suscipit reiciendis quisquam alias ipsum dignissimos laudantium commodi! Ea quam, ut ducimus natus? Repudiandae asperiores reiciendis commodi, deserunt culpa architecto. Neque veniam, repellendus totam repudiandae maxime atque. Ipsa saepe assumenda blanditiis quas odit repellendus inventore alias quo, totam neque libero a, suscipit fugit vero deleniti voluptate nam magnam dolor delectus cumque eius dolorum. Explicabo dicta, tempora voluptatem nihil esse repellat quasi dolores enim cupiditate. Quis sequi sed ipsam aspernatur libero asperiores ullam ipsa ducimus pariatur debitis! Laborum recusandae ratione repellat veritatis adipisci doloribus voluptate, soluta iste alias. Ipsum quaerat eius velit tenetur tempore suscipit quis ea error nulla, esse iure sed, odio odit dicta eaque placeat laboriosam tempora rem dolores praesentium voluptates. Vitae quibusdam veritatis unde libero iure laborum, laboriosam voluptatibus aut dolorum molestias impedit quos officiis ipsum sequi reprehenderit quasi ea est expedita suscipit! Nostrum, quisquam, possimus. Fuga sunt sint placeat quas officia illo id! Quam eum sint harum explicabo consectetur assumenda nesciunt qui minus sapiente magnam, aliquam, quibusdam sequi facere, error sed accusamus tempore ex! Reiciendis quasi nobis in error, accusamus sit. Sapiente mollitia quaerat aspernatur commodi accusantium hic nemo a blanditiis ipsa labore dolorum voluptates eos quos, minus architecto porro quia. Modi molestias iste culpa! Autem eum architecto vitae similique assumenda, molestiae praesentium numquam maxime temporibus saepe doloremque voluptatibus beatae nostrum minima unde qui facilis soluta ipsum. Sint veniam temporibus necessitatibus, doloremque enim sapiente error ab hic ea minima corporis deserunt? Perferendis laudantium pariatur cum eius sequi eveniet minus optio, necessitatibus rerum. Perspiciatis quibusdam obcaecati molestias totam nulla, animi laborum voluptatibus quia! Totam suscipit blanditiis distinctio quod ipsam, unde facilis alias, sit optio vero ex tempora accusamus nulla eius ea sunt incidunt, reprehenderit quos harum veritatis vitae. Deleniti animi quisquam incidunt quia, recusandae quaerat eius totam ut, itaque minus quam eum eligendi quibusdam dolorem. Eligendi deleniti ab cupiditate non consectetur odio consequatur, eius enim accusamus sunt quasi tempore ad harum explicabo sint possimus id voluptas quae repudiandae libero assumenda sequi. Recusandae adipisci consequuntur nesciunt natus minima consequatur sint nihil saepe nulla quia, unde molestias, similique labore, laudantium quisquam repudiandae at ipsa totam itaque quos aperiam dicta alias. Dolores asperiores quibusdam, eaque obcaecati animi, eveniet eligendi omnis commodi adipisci sequi vero aperiam nobis aliquid iusto accusamus voluptatem ullam quas. Iusto mollitia eveniet numquam, voluptate voluptatibus eligendi sunt unde tempore corrupti veritatis deleniti quaerat natus sequi fugit distinctio magni neque sint qui laboriosam ad esse molestias aut iure ipsam. Fugiat id maxime totam dicta ut, mollitia aliquam, ad possimus ea, reiciendis aperiam voluptas? Consectetur unde quam accusantium aperiam esse, delectus maxime sunt molestiae maiores cumque doloribus fugiat ullam facere at ratione iusto earum, corporis ab autem perspiciatis saepe natus, debitis ipsa beatae! Earum maxime ad, tempore amet asperiores reiciendis molestiae necessitatibus sit est architecto pariatur esse minus laborum temporibus. Nesciunt cumque, exercitationem dignissimos sed non laborum laudantium dolore molestiae magni eos? Vel assumenda impedit quae vitae quaerat nisi, quam excepturi ad accusantium quo tempora dignissimos, modi magnam alias, eum maxime, cum error officia! Nam dolorem itaque atque odio, quae est provident cumque ea sunt veritatis fugit omnis. Quod sapiente delectus quos ratione dolor molestiae at, facere saepe harum! Doloribus culpa beatae aut sequi explicabo, rerum dolore tempore tenetur ut voluptatibus! Fugiat, odit maiores repellendus accusantium suscipit expedita quasi dolore quae! Libero nostrum numquam nesciunt odio accusamus voluptates totam, voluptatem voluptate tempora laborum velit rerum magnam minima omnis quidem earum illum asperiores ullam sapiente ad optio possimus, quibusdam autem cum. Qui neque aperiam quas quae vero molestias eum omnis ipsum, veniam unde, voluptatibus aspernatur atque itaque. Veniam laborum perspiciatis quos, velit nulla, rerum laboriosam provident nobis mollitia nostrum impedit! Dolorem nostrum eius fuga quidem tempora ipsa suscipit tempore possimus, molestiae voluptatem aut quaerat recusandae magni praesentium rem, ipsam et nemo odio excepturi velit nam nesciunt assumenda quia! Necessitatibus recusandae sapiente reiciendis quos. Sapiente harum asperiores voluptas doloribus a? Obcaecati reprehenderit, aut dolore officiis, explicabo nesciunt illum natus ratione expedita. Dignissimos ducimus, veniam inventore consequatur enim vel voluptate aliquam nemo! Laudantium inventore id aperiam mollitia ducimus, natus ad hic corporis quia nostrum sit voluptatum placeat in ullam saepe vero provident vel laboriosam iure itaque totam? Sit earum possimus expedita atque officia voluptates rerum praesentium, doloremque unde, repudiandae quia? Repellat quam amet saepe esse dignissimos culpa ea doloribus. Pariatur facilis optio beatae, tempora architecto, deleniti ab. Tenetur quisquam temporibus accusantium iure dolore ratione nostrum porro. Repellendus excepturi deserunt, autem reprehenderit facere accusantium in quod? Suscipit repellat aliquam neque eius officia dolores commodi fuga dolore recusandae, nobis labore provident voluptatum, iure totam earum ab magnam dignissimos modi ipsa? Quisquam explicabo dicta repudiandae quae eveniet, accusamus exercitationem iste odio, cupiditate laborum debitis sit pariatur reiciendis nisi rem. Quos neque omnis eos suscipit repellat enim numquam inventore at possimus, corrupti ullam atque optio soluta accusamus explicabo deleniti veniam quae aut quod maiores eius architecto quis odit. Nemo nobis a laborum repudiandae ipsum explicabo voluptatum repellendus? Nisi inventore similique consectetur, molestiae reprehenderit quos ex blanditiis nesciunt eveniet laboriosam quae voluptates assumenda odio quaerat quasi consequatur, suscipit esse a fugiat. Aspernatur magnam cum molestiae odio autem eius enim, corporis perspiciatis tenetur repudiandae. Temporibus sint tempore repudiandae, sed sunt ducimus molestiae amet numquam deleniti blanditiis voluptatum perspiciatis incidunt suscipit quasi similique accusamus, possimus eligendi obcaecati eveniet iure architecto in voluptatem. Blanditiis, amet. Harum fuga rerum qui labore, earum explicabo nihil mollitia at vitae sequi dolorum provident enim tenetur, nam deleniti minima! Totam qui, sunt reiciendis, ad blanditiis, reprehenderit ex quia fugit deleniti delectus animi, obcaecati commodi. Eius fuga hic, quos pariatur ut illum, optio eligendi iste accusantium a numquam aliquam, minus quam nemo molestiae enim. Voluptates cupiditate provident quae libero consectetur, rem delectus magnam harum, laudantium hic placeat totam accusamus ullam reprehenderit, dolor natus iste aperiam! Alias molestias ipsam et odit maxime ex, illum quam! Vero nisi mollitia nam praesentium delectus incidunt omnis, facilis nostrum provident impedit. Distinctio ea, tenetur delectus qui explicabo dolorem odio praesentium!
</div>


aside{
	background-color: #000;
	width: 200px
	padding: 20px;
	margin-top: 40px;
	position: sticky;
	left: 0;
}

container - класс bootstrap сетки

Всем спасибо за ответы
  • Вопрос задан
  • 196 просмотров
Подписаться 1 Простой 7 комментариев
Пригласить эксперта
Ответы на вопрос 2
@oelena
Sticky плавает внутри родителя. Т.е. его родитель должен быть тег main, и так он на header и footer не зайдёт. И укажите top.
Ответ написан
Комментировать
@valentinadikaya
Вместо sticky используйте fixed
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы