WEB骇客
<header>
		<div class="container">
			<h1>页面标题</h1>
		</div>
	</header>

	<div class="container">
		<div id="sidebar">
			<div class="sidebar__inner">
				<p>这是一个粘性侧边栏(Sticky Sidebar)</p>
			</div>
		</div>
		<div id="content">
			<p>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>Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.</p>
		</div>		
	</div>

	<footer>
		<p>这是页脚</p>
	</footer>
*,
		*: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: 600px;
			color: darkgrey;
		}

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

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

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

		footer p{
			margin: 0;
		}
$(document).ready(function(){

			$('#sidebar').stickySidebar({
				topSpacing: 20,
				containerSelector: '.container',
				innerWrapperClass: 'sidebar__inner'
			});
		});
返回