所属分类:网页特效-滑块/旋转/滚动,触屏/拖拽/下拉,其他特效
aside { float: left; max-width: 220px;}
.inside { background-color: #f4f4f4; padding: 10px; }
#sidebar.sticky { float: none; position: fixed; top: 20px; z-index: 6; left: auto; }
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/stickySidebar.js"></script>
$(document).ready(function() {
$('#sidebar').stickySidebar({
sidebarTopMargin: 20,
footerThreshold: 100
});
});
<!--sidebar-->
<aside id="sidebar">
<div class="inside">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis mattis tortor sit amet gravida. Curabitur tincidunt tellus bibendum tellus eleifend porttitor. Etiam hendrerit purus a sollicitudin tempor. Curabitur sed ipsum eget erat mollis luctus. Donec consectetur dui ac diam blandit, sit amet luctus justo fringilla. Pellentesque feugiat enim a mi pulvinar aliquet.</p>
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis mattis tortor sit amet gravida. Curabitur tincidunt tellus bibendum tellus eleifend porttitor. Etiam hendrerit purus a sollicitudin tempor. </p>
</div>
</aside>
<!--end sidebar-->