滚动列表导航自动浮动 获赏10金币 案例教程 基础教程

leeyun 普通用户 2019-11-25 3070

滚动到指定位置显示和隐藏元件

 

一、实现效果描述:

在一个滚动列表中,我们经常会需要向上滚动鼠标,滚动到指定位置的时候需要在顶部固定显示对应区域的导航信息。如下图所示:


 

 

二、用到的主要元件:

动态面板

 

三、用到的函数:

scrollY :某个元件的垂直滚动距离,我们只需要判断滚动的数值大于或者小于既定的数值即可。

 

四、使用到的用例:

1、滚动时

2、向上滚动时

 

首先看看我们今天需要首先的效果图:

 

五、实现流程:

1.如图所示,进行布局,顶部的“每日上新”“最热销售”设置为隐藏,且移动到中间居中对齐:

 

 

中间动态面板嵌套了一个动态面板,主要是为了隐藏滚动条,看起来不那么丑。

最底层为:一个长长的矩形(用来滚动)+两个命名好的矩形,用来做页面上的导航。


2.接着,我们需要确认列表上面“每日上新”“最热销售”所在的Y坐标:


 

3.接着我们需要分析滚动时候的事件,通过滚动判断ScrollY的数值

滚动时:

如果scrollY177440之间,显示红色的浮动导航;

如果scrollY大于440时显示黄色浮动导航;

 

向上滚动时:

如果scrollY170440之间,隐藏黄色导航;

如果scrollY小于170的时,隐藏红色导航;

 

注意:滚动时的用例和向上滚动的刚好相反;


 

滚动时的条件判断:


 

3、最终,可以把列表上面增加其他元素,让列表看起来像一个真正的列表,如下图效果:

 

 


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (18)
  • 18809860773 普通用户 2022-4-23
    0 引用 19
    1
  • 宸枫 普通用户 2021-11-22
    0 引用 18
    感谢
  • qq82ke 普通用户 2021-10-8
    0 引用 17

    喜欢简洁导航列表

  • beAst 普通用户 2021-10-8
    0 引用 16
    感谢分享
  • 亿元盈盈 普通用户 2021-9-26
    0 引用 15
    xx
  • 发发发发 普通用户 2021-8-20
    0 引用 14
    感谢分享
  • wowo 普通用户 2021-6-21
    0 引用 13
    感谢
  • 围城AD 普通用户 2021-4-21
    0 引用 12
    感谢分享
  • qzl123 普通用户 2021-3-16
    0 引用 11
    感谢分享
  • 飞奔的母猪 普通用户 2020-9-17
    0 引用 10
    感谢分享
  • 宸枫 普通用户 2020-6-27
    0 引用 9
    谢谢
  • Demon_1586777772 普通用户 2020-4-13
    0 引用 8
    厉害
  • szuzsq 普通用户 2020-2-4
    0 引用 7
    ok,真的很好.
  • Jameshuang 普通用户 2020-1-11
    0 引用 6
    厉害
  • ccoo 普通用户 2020-1-3
    0 引用 5
    牛逼
  • V.YU_1577013902 普通用户 2019-12-24
    0 引用 4
    666
  • 四两拨五斤 普通用户 2019-12-6
    0 引用 3
    谢谢
  • 沈十三 管理员 2019-11-26
    0 引用 2
    感谢分享,获得10金币奖励!
返回