相信大家在工作中遇到这样的一个难题,绞尽脑汁,尝试N种方法,还是没有做出很流畅的悬浮效果。
曾经作者也遇到这样难题,今天我将带领大家一起学习,一起解决这个难题。
这是一个什么难题?
请查看下图:
网站头部,整站导航;页面下滑时提起,悬浮置顶效果很好做;把网站头部,整站导航放在动态模板外面或者将网站头部,整站导航放在动态面板里面,设置固定到浏览器中居中靠上即可。
但是页面下滑时,如果需要将频道导航提起,悬浮至置顶效果该怎么做呢?
这样的效果,现在网站中比比皆是,比如:36Kr、不凡商业、钛媒体….等等,都用此交互效果展示频道分类,便于用户点击,减少用户学习成本。
我们新建 3 个板块,分别起上名字头部、广告、频道导航。
别光看着,来动手一起练习吧~
选中板块后,给每一个板块名称写上。
前提:鼠标不要选中任何板块,如果你选中了头部板块,点击下背景即可取消板块选中。
①右侧点击窗口滚动时。
②点击添加条件,进入条件配置页面。
③选择值。
④点击fx>然后点击插入变量或函数,>最后鼠标往下滑到窗口处,选择Window.scrollY,确认。
⑤回到条件配置页面,点击+号旁边的fX按钮>然后点击添加区域变数>选择元件>选择广告,确认。
⑥回到条件配置页面,选择大于。
解释:刚刚我们设置的是,当窗口滚动时,向下所滚动的距离大于广告板块高度的值条件。
条件设定好后,点击确认。
①找到移动并点击它>然后选择频道导航>最后移动选框中选择“到达”。
②以上操作完成后,点击y处的fx>然后点击插入变量或函数>最后选择Window.scrollY,点击确认。
解释:
步骤 3 中,当窗口滚动时,向下所滚动的距离大于广告板块高度的值。
步骤 4 中,移动频道导航,到达坐标X0,Y窗口滚动的起点,也就是顶部位置。
频道导航提起,悬浮至置顶效果大功告成。
注意点:
刚刚完成了,当窗口滚动时,向下所滚动的距离大于广告板块高度的值。移动频道导航,到顶部位置提起,浮动。
可以将刚刚做好的案例复制,粘贴生成一份新的案例。也可重新编辑一份新的案例,为了节省时间我就复制,粘贴生成一份新的案例。
按刚刚教您的步骤,进入条件设立板块,别的都不要动,将大于改成小于即可。
解释:刚刚我们设置的是:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值条件。
①选中,频道导航,记住Y轴坐标值。
②点开案例,将记住的Y轴坐标值填充到Y字段。
解释:
案例2:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值时。
案例3:移动频道导航,到达坐标X0,Y220 的位置(自己起始位置)。
效果预览:https://m45sa3.axshare.com
以上是作者的全部讲解,有点啰嗦,希望能帮助到你们。
如有疑问欢迎留言,一起探讨,学习。