素材牛VIP会员

jQuery左侧固定导航栏特效插件stickySidebar

 所属分类:网页特效-滑块/旋转/滚动,触屏/拖拽/下拉,其他特效

 浏览:2131次  评论:0次  更新时间:2016-11-18
牛币素材VIP可免积分下载
jQuery左侧固定导航栏特效插件stickySidebar兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jQuery左侧固定导航栏插件stickySidebar是一款在用户向下滚动页面到一定距离时,侧边栏就会固定随页面往下漂浮滚动,非常实用。

详细介绍

使用方法:

引入核心css样式

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; }

引入jQuery库文件、插件JS文件

<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
    });
});

HTML结构

<!--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-->

相关素材 - 滑块/旋转/滚动,触屏/拖拽/下拉,其他特效

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)