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

  • 6
  • 0
  • 约2.69千字
  • 约 13页
  • 2017-06-04 发布于河南
  • 举报

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

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

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

文档评论(0)

1亿VIP精品文档

相关文档