关于标题:
标题的粘滞效果本来是准备使用position: sticky的,后考虑到在旧版浏览器中的兼容性,还是采用了scroll事件来监听每一个div是否进入粘滞区。 值得注意的是,当标题处于上方粘滞的时候,右侧菜单也会随之更新。
技能进度条:
用一个scroll事件去探测该区块的底部是否高于页面的底部,满足条件后触发效果,并且将该事件移除。
图片懒加载:
图片先使用尺寸相当小,但是高宽比相同的缩略图替代。 当页面滚动时候,探测图片是否在视窗中,即图片顶部高于页面底部,并且图片底部低于页面顶部。 图片进入视窗,就准备一个Image对象,设置其src,去预先加载图片。 加载完成后,将原图片的src修改,以便从缓存中读取,并设置完成的class,做动画效果。
移动端适配:
简历可以适应不同大小的屏幕,PC端时导航栏置于右侧;当屏幕尺寸小于768px时导航栏移到头部隐藏区域,相应的主题内容也做了适当调整