CSS-sticky
实现导航栏、侧边栏固定,右侧内容顺畅滑动效果
不积跬步无以至千里~ 细节决定成败,加油💪🏻
一、实现效果
如下图所示:
topNav
是导航栏T
,sideBar
是侧边栏S
,coreContent
是右侧展示内容C
。实现效果: 当鼠标向下滑动时,
导航栏T
和侧边栏S
都固定不动,只有
右侧展示内容C
随着鼠标的滑动而滑动(当右侧展示内容C
没有超出100vh
高度,也不向下滑动)。
二、代码
.topNav {height: 48px;/* 固定定位 */position: fixed;/* 层级最高 */z-index: 1;}.sideBar {width: 200px;position: sticky;/* 一定要记得加这个哟 */top: 0;height: 100vh;padding-top: 48px;box-sizing: border-box;}.coreContent {width: calc(100% - 200px);padding: 16px;/* 这里的64px是:topNav的高48px+项目需求所需的上padding16px *//* 若你的项目里不需要写上面的padding: 16px,则这里的padding-top为48px */padding-top: 64px;box-sizing: border-box;}