AdminLTE 3 фиксированный элемент при прокрутке вниз - PullRequest
0 голосов
/ 03 февраля 2019

Я хочу, чтобы элементы левого (красного прямоугольника) были зафиксированы, чтобы при прокрутке страницы она оставалась вверху страницы.Я пробовал с фиксированным и закрепленным свойством, но они не работают.

Предварительный просмотр

начало: enter image description here

после прокрутки: enter image description here

это страница https://adminlte.io/themes/dev/AdminLTE/pages/mailbox/read-mail.html

1 Ответ

0 голосов
/ 04 февраля 2019

Уже есть очень много очень хороших примеров на w3schools.com для Fixed Sidebar

, и здесь мой использует Bootstrap 4, CSS и обычный Javascript

var sideNavBarWidth = document.getElementsByClassName('side-navbar');
var innerNavBar = document.getElementsByClassName('inner-navbar');
// Giving a 1rem space from both side
innerNavBar["0"].style.minWidth = (sideNavBarWidth["0"].offsetWidth - (32)) + 'px';
.list-group-item {
    cursor: pointer !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-light">
	<div class="col-12">
		<div class="row">
			<div class="col-3 border border-dark px-0 py-4 side-navbar">
				<div class="position-fixed inner-navbar mx-3">
					<ol class="list-group">
						<a href="#" class="list-group-item my-1">Chapter 1</a>
						<a href="#" class="list-group-item my-1">Chapter 2</a>
						<a href="#" class="list-group-item my-1">Chapter 3</a>
						<a href="#" class="list-group-item my-1">Chapter 4</a>
						<a href="#" class="list-group-item my-1">Chapter 5</a>
					</ol>
				</div>
			</div>
			<div class="col-9 border border-dark px-4 py-4">
				<div class="row mb-3 px-4 jumbotron-fluid">
					<h1>Chapter 1</h1>
				</div>
				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

				<div class="row mb-3 px-4 text-justify">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
					labore et dolore magna
					aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
					amet mattis vulputate
					enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
					scelerisque in dictum. Sit amet
					massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
					etiam dignissim diam quis.
					Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
					Eget duis at tellus at.
					Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
					mauris a diam maecenas
					sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
					pulvinar neque laoreet
					suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
					habitant morbi tristique
					senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
				</div>

			</div>
		</div>
	</div>
</div>

Надеюсь, это поможет вашему сценарию.

...