今天，我们结合浮动固定菜单栏和楼层导航，实现同一界面内的锚点定位。

想必很多人已经见过浮动固定菜单和楼层导航的案例，浮动固定菜单的场景非常的常见，人人都是产品经理的产品经理导航（http://dh.woshipm.com/）就是一个典型的浮动固定菜单的场景，当窗口向下滚动超过一定距离时，菜单栏固定在浏览器窗口的最上方：

当一个页面内容较多时，我们又经常以楼层的方式快速导航，并且在页面的右下角有一个返回到顶部的按钮。单击对应的楼层按钮，快速定位到该楼层，这在一些电商网站中出现较多，例如京东网首页：

今天，我们结合浮动固定菜单栏和楼层导航，实现同一界面内的锚点定位，完成后的效果图如下：

单击这里查看在线演示

从这个例子里，我们可以掌握的知识点有如下几个：

• 关于动态面板“固定到浏览器”属性的应用
• 浮动固定菜单栏的设置技巧
• 滚动到元件动作的应用
• 窗口滚动时事件的处理
• 自动适应窗口宽度的设置

一、界面布局