滚动监听

基本案例

当内容滚动时,导航条状态会对应改变。

首先在监听状态元素上添加.spy样式;同时设置监听的对象属性data-target,当为空为窗口滚动;也可设置滚动的偏离值data-offset-spy,单位为px。



拼图介绍


国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小,使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面,让前端开发像玩游戏一样快乐而轻松。

拼图应用


拼图前端框架在传统CSS框架的基本上,增加了HTML5、CSS3、JS等技术组合应用,应用最新的浏览器技术,同时兼容较早的浏览器,新旧结合,承前启后,开发者只需把框架文件引入到项目中,就可以初现快速的共同开发,改变以往建立PC网站同时,再建立手机网站的局面,实现一站响应所有设备,大大提高了开发效率。

功能特色


移动优先、跨屏响应


拼图以移动设备为基点,优先适应于移动设备;从移动设备扩大到平板、桌面电脑等设备,实现跨屏响应,兼容桌面浏览器的同时,更适应了移动互联网的潮流。

组件丰富、海量插件


拼图前端框架重新定义了CSS基础、常用元件及JS组件,可快速构架前端界面,实现跨屏响应。同时兼容所有jQuery插件,在项目中可以灵活使用,让前端开发如虎添翼。

轻量高效、国产开源


拼图基于应用广泛jQuery插件,轻量高效;相对于国外的前端框架,拼图前端框架侧重于对中文的支持,符合国人的视觉及体验,实现到国内主流浏览器的支持,减少兼容性测试时间,提高开发效率。

参数

滚动监听包含监听对象(data-target)和垂直偏离(data-offset-spy)两个值。

参数 类型 默认值 可选值 说明
data-target 字符串 window 监听对象,如:data-target="#id"或data-target=".class"
data-offset-spy 整数 0 垂直偏离,如data-offset-spy="10",单位为px。