iElevator.js 是一个jquery小插件，使用简单，兼容IE6，支持UMD和3种配置方式，比锚点更灵活。
Default Options
_defaults = {
floors: null,
btns: null,
backtop: null,
selected: '',
sticky: -1,
visible: {
isHide: 'no',
numShow: 0
},
speed: 400,
show: function(me) {
me.element.show();
},
hide: function(me) {
me.element.hide();
}
}
- floors: 页面中floor模块的引用
- btns: 焦点图的引用
- backtop: 回到顶部按钮的引用
- selected: 焦点图在进行滚动或单击时的选中样式
- sticky: 模拟position: sticky定位，并可以指定elevator顶部距离窗口顶部的距离，默认为-1
- visible: 用于控制【电梯】的显示与隐藏，当srollTop值大于numShow时，显示【电梯】，反之则隐藏
- speed: 控制滑条的滚动速度
- show: 可以重写该函数，来定制elevator的显示方式
- hide: 可以重写该函数，来定制elevator的隐藏方式
安装
npm install ielevator || bower install ielevator
使用
1. back to top 【回到顶部】[单击我看Demo效果]
HTML:
<div class="elevator elevator-backtop" id="backtop" >
<a href="javascript:;" class="js-backtop">TOP</a>
</div>
Javascript:
$('#backtop').ielevator({
backtop: $('#backtop .js-backtop')
});
只需获取`backtop`引用即可，就这么简单！
2. simulate elelvator [单击我看Demo效果]
HTML:
<div class="elevator" id="elevator" data-elevator-options='{"selected": "custome-selected"}'>
<ul>
<li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
<li><a href="javascript:;" class="js-btn">floor2</a></li>
<li><a href="javascript:;" class="js-btn">floor3</a></li>
<li><a href="javascript:;" class="js-btn">floor4</a></li>
<li><a href="javascript:;" class="js-btn">floor5</a></li>
<li><a href="javascript:;" class="js-btn">floor6</a></li>
<li><a href="javascript:;" class="js-btn">floor7</a></li>
</ul>
</div>
Javascript:
$('#elevator').ielevator({
floors: $('.js-floor'),
btns: $('#elevator .js-btn'),
selected: 'selected',
visible: {isHide: 'yes', numShow: 400},
show: function() {
$('#elevator').slideDown(400);
},
hide: function() {
$('#elevator').slideUp(400);
}
});
注意： `data-ielevator-options='{"selected": "custome-selected"}` 配置的优先级是最高的
3. simulate elevator + back to top [单击我看Demo效果]
HTML:
<div class="elevator" id="elevator" data-elevator-options=''>
<ul>
<li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
<li><a href="javascript:;" class="js-btn">floor2</a></li>
<li><a href="javascript:;" class="js-btn">floor3</a></li>
<li><a href="javascript:;" class="js-btn">floor4</a></li>
<li><a href="javascript:;" class="js-btn">floor5</a></li>
<li><a href="javascript:;" class="js-btn">floor6</a></li>
<li><a href="javascript:;" class="js-btn">floor7</a></li>
<li><a href="javascript:;" class="js-backtop">TOP</a></li>
</ul>
</div>
Javascript:
$('#elevator').ielevator({
floors: $('.js-floor'),
btns: $('#elevator .js-btn'),
backtop: $('#elevator .js-backtop'),
selected: 'selected',
visible: {isHide: 'yes', numShow: 400},
show: function() {
$('#elevator').slideDown(400);
},
hide: function() {
$('#elevator').slideUp(400);
}
});
4. require.js example [单击我看Demo效果]
这是一个require.js的实例
5. 模拟segmentfault文章导航 [单击我看Demo效果]
Javascript:
// 获取Markdown中的标题
var $demo = $('#demo'),
$titles = $('h2'),
$nav = $demo.find('.list'),
$highlight = $demo.find('.highlight'),
STR = '';
// 填充标题
$titles.each(function(){
STR += '<li><a>'+ $(this).text() +'</a></li>';
});
$nav.html(STR);
// 调用ielevator
$demo.ielevator({
floors: $titles,
btns: $('#demo li'),
sticky: 10,
selected: $highlight
});