今天因为业务需要,需要实现一个功能,就是:
"当页面滑动到一定高度后,出现顶置按钮",这或许不是很难的一个功能,但是对于菜鸟来说的说,我并不会,所以自己上网查了查,有很大的收获,所以我就记录了下来.
因为是是开发移动端,但是由于PC端也有同样的效果,但是代码有点不一样,所以就分开写了.
移动端:
使用的框架是ionic和angular,因为是刚入行的菜鸟,所以ionic和angular也不是很熟练,这里便不深入解释.
ionic有一个标签 这个标签(我个人称为标签,因为挺像的)有一个属性on-scroll="",on-scroll,该方法的作用是,当滑动标签的内容时,会执行on-scroll的方法.所以我们可以通过这个方法获取页面滑动的高度为多少.
然后可以通过注入ionic的$ionicScrDelegate服务的getScorllPosition()方法获取到视图对象
getScorllPosition()方法返回:对象滚动到该视图的位置，具有以下属性：
{数值}left从左侧到用户已滚动的距离(开始为 0)。
{数值}top从顶部到用户已滚动的距离 (开始为 0).
(滑动100px ==$ionicScrDelegate.getScorllPosition().top == 100)
所以整个功能的大致步骤为:
1,做一个顶置图标,用绝对定位定位到页面某处,然后使用ng-show=‘config.showTop‘去隐藏该图标(因为使用的是angularjs),‘config.showTop‘为自定义的对象属性,初始化为false
2,新建一个方法,该方法用于获取视图所滑动的距离,该方法放在标签
3,当滑动距离大于某个数值的时候,config.showTop的值变成true,顶置图标就显示出来了,相反的,如果小于,就为
如果觉得《Html上滑到指定高度置顶 前端技术 -- 页面滚动条到一定高度后出现置顶按钮(示例代码)...》对你有帮助，请点赞、收藏，并留下你的观点哦！
