CSS3右侧悬浮导航伸缩滚动切换效果
右侧悬浮的导航伸缩效果，蛮适合做滚动切换的锚点导航。CSS3 的动画和过渡配上 position: fixed，让整个交互看起来还挺顺滑的。你可以让导航固定在页面右侧，用户怎么滚都不丢，体验还不错。
导航的伸缩可以用 flexbox 来布局，搭配 transition 控制展开收起。比如鼠标移上去菜单项放大，移开自动收起，挺节省空间的。如果再配上滚动监听，滚到哪个区块，右边菜单自动高亮，方便。
滚动切换你可以纯用 CSS 的 scroll-snap，也能配合点 JS，比如监听 scrollTop，加点类名变色啥的，视觉反馈更直接。
结构方面，一般就一个 demo.html 放页面内容，一个 style.css 写样式，图片放 images 里。布局写起来不复杂，重点是交互的细节调优。
如果你正好在做着陆页、产品页、文档站这些多段式滚动页面，蛮建议你试下这个效果，视觉和功能都不赖。
文件大小：39.89KB
评论区