HTML类似美团关联列表 左右联动列表

废话不多说，直接上原理与代码。

1.首先布局，左右联动即左右布局。

左边导航用 宽度限制+高度限制+浮动+绝对定位，右边 宽度限制+浮动

 .divNav{
                width: 19%;float: left;background: #F6F9FE;
                scrolling:no;
                position: fixed;
                left: 0;
                bottom: 0;
                height: 100%;
                z-index: 999;
            }
            .divContent{
                width: 81%;float: right;background: #FFFFFF;
            }

效果图：

 2.右边列表内容填充，懒得说了我特喵的一个后端，写前端代码，一次性说完思路，等下上完整代码，自己去上下而求索。

右边列表自己去控制下高度和宽度，左边做个间隔，然后OBJK了；布局就完成了，只要上JS了。

3.JS思路：有规律的控制左右标签。获取右边标签距离顶部距离，如果高度在某一个区域则显示左边对应标签。我这边显示的是 右边高度0-100 的，后面请自行依据页面更改值。

4.其实这还不算完善，（这页代码只有右边单个列表够多才不需要匹配左边背景色）还需要匹配到左边的高度 才会好看一点

        
        
        
        
        
         
        
        
        
        
        
        
        
        
        
        
        

        
        
        


    

    
    
        
            
                
                    
                        
                            话费卡                            
                
                
                    
                        
                            加油卡                            
                
                
                    
                        
                            电商卡                            
                
                
                    
                        
                            商超卡                            
                
                
                    
                        
                            出行券                            
                
                
                    
                        
                            美食券                            
                
                
                    
                        
                            影音券                            
                
            
        
        
            
                

                    

                                
                        话费卡                                    
                    
                    
                        

                        中国移动                        
                    
                        

                        中国联通                        
                    
                        

                        中国电信                        
                
            
            
                

                    

                                
                        加油卡                                    
                    
                    
                        

                        中石化充值卡                        
                    
                        

                        中石油充值卡                        
                
            
            
                

                    

                                
                        电商卡                                    
                    
                    
                        

                        京东e卡                        
                    
                        

                        苏宁易购                        
                    
                        

                        壹钱包                        
                    
                        

                        万里通                        
                    
                        

                        天猫超市卡                        
                    
                        

                        天猫购物券                        
                    
                        

                        每日优鲜                        
                    
                        

                        天猫元宝                        
                    
                        

                        美团礼品卡                        
                    
                        

                        网易严选                        
                    
                        

                        盒马鲜生                        
                    
                        

                        瑞祥商联卡                        
                    
                        

                        大众e通卡                        
                    
                        

                        付费通卡                        
                    
                        

                        唯品会                        
                
            
            
                

                    

                                
                        商超卡                                    
                    
                    
                        

                        沃尔玛                        
                    
                        

                        百联ok卡                        
                    
                        

                        家乐福礼品卡                        
                    
                        

                        苏果超市                        
                    
                        

                        山东一卡通                        
                    
                        

                        永辉超市卡                        
                    
                        

                        华润万家                        
                    
                        

                        福卡                        
                    
                        

                        大润发                        
                    
                        

                        中欣卡                        
                    
                        

                        天虹                        
                    
                        

                        美通卡                        
                    
                        

                        中银通支付卡                        
                    
                        

                        资和信商通卡                        
                    
                        

                        和信通                        
                    
                        

                        飞银彩虹卡                        
                    
                        

                        万商卡                        
                
            
            
                

                    

                                
                        出行券                                    
                    
                    
                        

                        携程任我行                        
                    
                        

                        滴滴出行                        
                
            
            
                

                    

                                
                        美食券                                    
                    
                
            
            
                

                    

                                
                        影音券                                    
                    
                    
                        

                        爱奇艺                        
                    
                        

                        腾讯视频                        
                    
                        

                        优酷视频                        
                    
                        

                        芒果TV                        
                    
                        

                        搜狐视频                        
                    
                        

                        淘票票                        
                    
                        

                        猫眼                        
                    
                        

                        QQ音乐                        
                    
                        

                        喜马拉雅                        
                    
                        

                        网易云                        
                    
                        

                        vaudeville网盘                        
                    
                        

                        哔哩哔哩                        
                    
                        

                        饿了么                        
                    
                        

                        京东电影                        
                    
                        

                        百度文库                        
                
            
            

            

            

            

            

        


    

效果图：