摘要：
　　上次网站改版时有一个悬浮滚动楼层的特效，然后今晚艺灵将其分享出来。艺灵已将其封装成jquery插件，调用只需要一行代码即可实现高大上的效果哦......

今天分享的是一个带悬浮滚动楼层的插件，这个jquery特效也是艺灵前段时间给公司写的，现在分享出来。来露个脸吧，动态效果图：

下面我们来一步步完成这个效果，不会做的动动手码下代码，假以时日，你也可以写出一手特效来！

详细分析效果

1.左侧快捷通道默认隐藏，当滚动到一定高度后显示出来；
2.点击左侧的快捷通道时，页面内容会定位到对应的楼层。例如：点击3F，此时页面会直接定位到“欧式风格”；
3.页面正常滚动时，当滚动到不同楼层内容时左侧的快捷通道会激活当前楼层的样式。

html页面结构

分析完效果后开始码代码了，我们可以做一个简单的demo页面。我们给楼层取名为：ylsj-floor，为了方便定位，直接以数字作为楼层的标识号，即：yf_1f,yf_2f,......,yf_nf。左侧的快捷通道取名为：xf-floor，里面有多个子楼层取名为：xf-f_1,xf-f_2,......xf-f_n，快捷通道的激活样式名为：ylsj-xfs-on

html源码

<div class="ylsj-floor yf_1f" style="background: #F09997;">第一层内容</div>	
<div class="ylsj-floor yf_2f" style="background: #0044CC;">第二层内容</div>	
<div class="ylsj-floor yf_3f" style="background: #00534E;">第三层内容</div>	
<div class="ylsj-floor yf_4f" style="background: #006600;">第四层内容</div>	
<div class="ylsj-floor yf_5f" style="background: #00CCFF;">第五层内容</div>	
<div class="ylsj-floor yf_6f" style="background: #F2DD8C;">第六层内容</div>
<div class="xf-floor">
　<a class="xf-f_1 ylsj-xfs-on">1F<span>中式风格</span></a>
　<a class="xf-f_2">2F<span>韩式风格</span></a>
　<a class="xf-f_3">3F<span>欧式风格</span></a>
　<a class="xf-f_4">4F<span>田园风格</span></a>
　<a class="xf-f_5">5F<span>童趣卡通</span></a>
　<a class="xf-f_6">6F<span>办公工装</span></a>
</div>

css样式

<style type="text/css">
/*页面简单重构*/
*{margin: 0;padding: 0;}
.ylsj-floor{min-height:600px;width:990px;margin:0 auto;text-align: center; font-size: 20px;}
.xf-floor{width: 50px; position: fixed;left:80px;top:200px; display:none;text-align: center; font-size: 12px; font-family: "微软雅黑";}
.xf-floor a{display: block;width: 100%;height:50px; position: relative; overflow: hidden;border:1px solid #D0656A; line-height: 50px;margin-bottom: -1px;}
.xf-floor a span{display: block; width:26px; position: absolute;left:100%;top:0;  padding: 9px 12px;  background: #fff;  line-height: 16px;}
.xf-floor a:hover span,.xf-floor .ylsj-xfs-on span{left:0%;-webkit-transition: .6s;transition: .6s;;}
</style>

现在静态效果已经有了，只差加特效了。

一、滚动到一定距离后显示快捷通道

jquery代码

$(function(){
　$(window).on('scroll',function(){
　　$w_t=$(this).scrollTop();/*滚动距顶值*/
　　/*判断条件,大于400时显示快捷通道*/
　　if($w_t>400){
　　　$('.xf-floor').fadeIn(300);
　　}else{
　　　$('.xf-floor').fadeOut(300);
　　};
　})
});

上面的代码表示：当页面滚动距离大于400时渐显左侧的快捷通道，否则渐变隐藏。

二、点击快捷通道定位楼层内容

jquery代码

$(function(){
　$('.xf-floor').find('a').on('mousedown',function(){
　　/*变量，控制激活样式*/	
　　k=1;
　　/*楼层长度*/
　　var $len=$('.xf-floor').find('a').length;
　　/*楼层索引*/
　　var i=$(this).index('.xf-floor a');
　　/*激活时添加样式同辈去除样式*/
　　$(this).addClass('ylsj-xfs-on').siblings('a').removeClass('ylsj-xfs-on');
　　/*获取对应内容层的top值*/
　　var $fn_top=$('.yf_'+(i+1)+'f').offset().top;
　　/*页面在.5s内回滚top值到0*/
　　$("html,body").stop().animate({"scrollTop":$fn_top+"px"},500,function(){k=0;});
　　return false;
　});
});

此时我们的功能已经实现了90%了，已经可以满足正常人的需求了，来张动态图给看官增加下信息吧！gif动态图：动态gif有点卡，这个不是代码问题。

最后一步还是回到了第一步中，在滚动时判断高度来给左侧快捷通道添加激活样式。

三、页面滚动左侧快捷通道楼层激活

jquery代码

$(function(){
　$(window).on('scroll',function(){
　/*计算当前页面共有几屏,n表示楼层1上面距离顶部的高度，通常情况下页面上面会有导航等元素占据一定高度，此案例已省去不必要元素故为0*/
　　n=0;
　　k=0;
　　j=($w_t - n)/600;
　　/*判断楼层数范围*/
　　if(j>0 && j<6){
　　/*取整*/
　　m_j=Math.floor(j);
　　};
　　/*变量，如果是0则添加样式，点击时不添加滚动样式*/
　　if(k==0){
　　$('.xf-floor').find('a').eq(m_j).addClass('ylsj-xfs-on').siblings('a').removeClass('ylsj-xfs-on');
　　};
　})
});

好了，大功告成，来张动态图欣赏下吧！gif图：

怎么样，内容页滚动时左侧的快捷通道已能够自动识别楼层了，是不是很高大上？！

为了方便调用，艺灵已将此特效封装成插件，需要的看官猛戳下面的地址吧！

源码下载

demo[源码]jquery制作悬浮滚动楼层插件.zip　

调用方法

<!--jquery插件库，必须引用，如已引用可忽略，建议引用1.8.3+版本-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入文本缩放插件-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/demojs/ylsjfloorscroll.js"></script>
<script type="text/javascript">
$(function(){
/*调用文本缩放插件*/
 $('样式名').ylsjfloorscroll({
　yfs_xh:"yf_",        /*楼层序列标识*/
　yfs_child:"ylsj-xfs-list",      /*楼层子级,避免污染a*/
　yfs_on:"ylsj-xfs-on", 		/*激活样式*/
　yfs_top:400,           /*滚动多少高度后显示添加激活样式*/
　yfs_time:500,             /*滚动时间  */
　yfs_ph:600,                /*楼层高度，自定义值*/
　yfs_starttop:0             /*楼层1f距顶部的值*/
});
});
</script>

看官只需要在对应位置添加默认样式名即可实现一行代码实现想要的效果！

第8~16行精简版

$('.xf-floor').ylsjfloorscroll();

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-10-02/325.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。