Sticky sidebar při skrolu v2

by Petr Haluza

HTML

<script src="https://blixhavn.github.io/sticky-sidebar-v2/js/rAF.js"></script>
<script src="https://blixhavn.github.io/sticky-sidebar-v2/js/ResizeSensor.js"></script>
<script src="https://blixhavn.github.io/sticky-sidebar-v2/js/sticky-sidebar.js"></script>

	<header>
		<div class="container">
			<h1>Site Title</h1>
		</div>
	</header>

	<div class="container clearfix" style="position: relative;">
		<div id="sidebar" class="" style="">
			<div class="sidebar__inner" style="position: relative;">
				<p>SSSLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam.Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque. Metus ipsum interdum sapien, quis ornare quam enim vel ipsum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id.SSSLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam.Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque. Metus ipsum interdum sapien, quis ornare quam enim vel ipsum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id.</p>
			</div>
		</div>
		<div id="content">
			<p>CCC Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.</p>

			<p>In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.</p>
			
						<p>In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis...

CSS

*,
		*:before,
		*:after{
			box-sizing: border-box;
		}

		body{
			font-family: Arial;
		}
		
		header{
			color: #888;
		}

		header h1{
			font-size: 30px;
		}

		.container{
			max-width: 700px;
			margin: 0 auto;
		}

		#content{
			border: 1px dotted green;
			padding: 18px;
			margin-left: 215px;
			min-height: 800px;
			color: darkgrey;
		}

		#sidebar{
			float: left;
			width: 200px;
			color: #ce8888;
			position: relative;
			will-change: min-height;
		}

		#sidebar .sidebar__inner{
			border: 1px dotted red;
			background-color: rgba(255, 0, 0, 0.01);
			padding: 10px;
			transform: translate(0, 0);
			transform: translate3d(0, 0, 0);
			will-change: position, transform;
		}

		footer{
			height: 150px;
			height: 85vh;
			border: 1px dotted black;
			margin-top: 20px;
			text-align: center;
			color: #8e8d8d;
			line-height: 150px;
			line-height: 95vh;
			background: rgba(0, 0, 0, 0.02);
		}

		footer p{
			margin: 0;
		}

		.clearfix:after{
			display: block;
			content: "";
			clear: both;
		}

JavaScript

var stickySidebar = new StickySidebar('#sidebar', {
			containerSelector: '.container',
			innerWrapperSelector: '.sidebar__inner',
			topSpacing: 15,
			bottomSpacing: 15
		});