js实现电梯导航效果

页面往下滑动到一定距离时，电梯导航显示，且与内容板块相呼应。使用了选项卡的功能，采用排他思想等实现。效果如下图所示：

代码：

封装函数 move.js:       可直接调用，无需修改

function move(obj, target, callback) {  
    clearInterval(obj.timer); // 清除之前的定时器  
    obj.timer = setInterval(function () {  
        var header = window.scrollY;  
        var distance = target - header;  
        var speed = distance / 10;  
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
        if (Math.abs(distance) <= Math.abs(speed)) { // 修改停止动画的条件  
            console.log('aaa');  
            clearInterval(obj.timer); // 清除定时器  
            window.scrollTo(0, target); // 确保滚动到目标位置  
            callback && callback();  
        } else {  
            window.scrollTo(0, header + speed);  
        }  
    }, 15);  
}

 详细代码如下：

    
    
    
    



    

    
黄金铂金
    
投资金银
    
钻石
    
银饰
    
彩色宝石
    
翡翠玉石
    
珍珠
    
流行饰品
    
天然木饰
    
奇趣收藏
    
眼镜手表
    


    

        

            
导航
            
黄金铂金
            
投资金银
            
钻石
            
银饰
            
彩色宝石
            
翡翠玉石
            
珍珠
            
流行饰品
            
天然木饰
            
奇趣收藏
            
眼镜手表
            
顶部