💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## 1,菜单选项与下面展示的内容进行--联动 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408234145880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) - 获取offsettop值 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408230755550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ==注意==: mouted中拿不到 `$el` , 要等模板中的内容渲染出来, ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408231811427.png) 方案: 图片加载完进行回调 `nextTick()` 异步,等渲染完就会执行。---行---但是图片没加载完----不行!!! ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408232502685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) 解决----**放在图片加载完成的回调函数** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408233018565.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) #### 另外可以增加**防抖函数** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408233544407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408233701645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ---- 防抖函数如下: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408233925770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ## 2 , 内容滚动,显示正确的标题 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408235133895.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408235044522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408235318485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408235419722.png) ## 3,【吸顶效果】让两个==位置不同==的==相同菜单栏==----的选择一致 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408222852476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ### 方案 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408223437119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) - 初始点击方法放在create中 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408223931181.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408224009513.png) - 初始点击方法放在mouted中,不需要判断是否为undefined