楼梯导航/在线咨询特效

// 楼梯导航,在线咨询

       <!-- 楼梯导航 -->
        <ul class='wmsFloor'>
            <li>1F</li>
            <li>2F</li>
            <li>3F</li>
            <li>4F</li>
            <li>5F</li>
            <li>6F</li>
            <li>7F</li>
            <li>8F</li>
            <li>9F</li>
            <li>10F</li>
        </ul>
    </div>
    <!-- 在线咨询 -->
    <div>
        <div style="color: #fff" class='wmsContact' title='展开'>
            手机淘宝
        </div>
        <div class='wmsOpen'>
            <div class='wmsX'>X</div>
        </div>
    </div>
$(window).scroll(function(){
    // console.log($(window).scrollTop())
   if($(window).scrollTop()>1176 &&$(window).scrollTop()<5457){
    $('.wmsFloor ').css("display","block")
   }else {
        $('.wmsFloor ').css("display","none")
   }
    var a=$(window).scrollTop();
    // console.log(a)
    if(1176<a && a<1580){
        $('.wmsFloor li').eq(0).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(1580<=a && a<1960){
        
        $('.wmsFloor li').eq(1).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(1960<a && a<2487){
        
        $('.wmsFloor li').eq(2).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(2487<a && a<2879){
        
        $('.wmsFloor li').eq(3).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(2879<a && a<3271){
        
        $('.wmsFloor li').eq(4).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(3271<a && a<3792){
        
        $('.wmsFloor li').eq(5).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(3792<a && a<4183){
        
        $('.wmsFloor li').eq(6).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(4183<a && a<4573){
        
        $('.wmsFloor li').eq(7).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(4573<a && a<5094){
        
        $('.wmsFloor li').eq(8).css('color','#b81c2b').siblings().css('color','#858685')
    }else if(5094<a){
        
        $('.wmsFloor li').eq(9).css('color','#b81c2b').siblings().css('color','#858685')
    }
})

    $('.wmsFloor li').each(function(i,ele){
        $(ele).click(function(){
            var i=$(ele).index();
            var a='#wms'+(i+1);
            // console.log(a);
            $('body,html').animate({scrollTop:$(a).offset().top},500);

        })
    });

    $('.wmsContact').click(function(){
        $('.wmsOpen').animate({'right':'0'},500)
    })
    
    $('.wmsOpen').click(function(){
        $('.wmsOpen').animate({'right':'-200px'},500)
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【文章摘要】主要是对移动医疗综合性问诊这块进行竞品分析,通过分析进一步了解医疗问诊这领域的整体产品需求和功能结构设...
    karry_阅读 10,682评论 0 15
  • 这篇文章来说说,中国在线教育市场的发展变化趋势。 在线教育我们都不陌生,就是通过互联网上提供的课程来自己学习。在线...
    73feb922c323阅读 4,140评论 0 0
  • 斯人不念桐花开 独坐清风片片来 浮年乐景恍犹现 何奈酒浊已鬓斑 浑江水涨船相隔 岸柳轻卷声无歌 未闻经久后离别 可...
    汪汪小小苏阅读 897评论 0 0
  • 1. 以前喜欢一个男孩子 他是现实版的狼来了 早上说等我,中午 中午说等我,下午 下午说等我,晚上 晚上说等我,明...
    顾北秋阅读 3,483评论 1 1
  • 新安装了系统ubuntu16.04,结果更改密码之后在打开google的时候要求输入……login keyring...
    九七学姐阅读 8,250评论 1 1