很实用的干货｜浮动固定菜单与楼层导航实践.pdfVIP

很实用的干货 ｜浮动固定菜单与楼层导航实践 今天 ，我们结合浮动固定菜单栏和楼层导航 ，实现同一 面内的锚点定位。 想必很多人已经见过浮动固定菜单和楼层导航的案例 ，浮动固定菜单的场景非常的常见 ，人人都是 产品经理的产品经理导航 （ht t p://dh.woshipm.co m/ ）就是一个典型的浮动固定菜单的场景 ，当窗口 向下滚动超过一定距离时 ，菜单栏固定在浏览器窗口的最上方 ： 当一个页面内容较多时 ，我们又经常以楼层的方式快速导航 ，并且在页面的右下角有一个返回到顶 部的按钮。单击对应的楼层按钮 ，快速定位到该楼层 ，这在一些电商网站中出现较多 ，例如京东网 首页 ： 今天 ，我们结合浮动固定菜单栏和楼层导航 ，实现同一 面内的锚点定位 ，完成后的效果图如下 ： 单击这里查看在线演示 从这个例子里 ，我们可以掌握的知识点有如下几个 ： 关于动态面板“固定到浏览器”属性的应用 浮动固定菜单栏的设置技巧 滚动到元件动作的应用 窗口滚动时事件的处理 自动适应窗口宽度的设置 一、界面布局 1、标题栏 添加一个无边框灰色矩形框 ，大小1250*66 ，命名t it le ，位置在 （0 ，80 ），模拟菜单栏。 复制这个矩形框 ，命名为menu ，模拟位于顶部的浮动固定菜单 ，位置在 （0 ，0 ）右键转换为动