或者在向下滚动页面时突出显示活动部分的侧边栏。
Demo1: 实现一个滚动到不同部分,修改导航栏的背景颜色的效果
创建导航栏组件
第一步就是创建一个导航栏组件 可以直接按下命令 K 并调出快捷菜单。...flex布局, 子项y方向垂直居中, x方向左右两端分布, 左右两边加入内边距padding
每一项的item 也是flex伸缩盒布局, 子项垂直水平居中
紧接着我们复制这个组件两份,分别修改背景颜色为黑色...页面完善,用于展示
创建三个页面,分别填充黑色,白色,黄色. 并且将我们刚刚创建的组件导入进来, 然后设置固定(fixed)定位,宽度为100%....当黑色部分在浏览器视口中,导航栏使用默认的组件
当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件
当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件
效果:
我们可以看到 当滚动不到不同部分的时候...然后就说下创建变体Icon 图标. 观察上方的Gif图片,我们就会发现,滚动到不同部分.右边的ICON 图标 在进行相应的变化.