樓梯導航/線上諮詢特效

weixin_34337265發表於2017-07-11

// 樓梯導航,線上諮詢

       <!-- 樓梯導航 -->
        <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)
    })

相關文章