左侧楼层导航的实现以及右侧导航的动画效果该怎么实现

如下:

思路只是给同学一个参考 ,老师给出的代码只是让同学能够了解一些方法要怎么用 ,学习一下代码实现的思路 . 因为有些代码还需要结合自己的html结构做调整 . 并不是作为一个标准的答案哦

建议同学有新问题的话 , 可以重新在问答区域提问 ,以便更及时去帮助解决问题哦

祝学习愉快 !

@浩浩吃 ,老师给你一个思路哦 :

1.左侧楼层导航

(1)导航默认设置隐藏 , 当页面滚动到楼层区域时设置为显示 , 这一块可以结合scrollTop来判断 . 

(2)导航也需要设置锚链接 , 当点击导航某一项时 , 页面滚动到对应楼层 , 并且要绑定点击事件 , 结合animate实现滚动的效果.

(3)导航每一项的文字默认也设置隐藏 , 当滚动或者点击到某一楼层时 ,显示对应的文字

如下参考代码:

2.右侧导航动画效果

(1)提示信息可以使用定位隐藏起来 ,参考如下:

鼠标移入时改变其位置:

可结合transition实现过渡效果

返回顶部可参考如下实现:

代码实现效果并不是唯一的 , 老师提供的思路也不是标准答案 ,只是给同学一个参考 . 希望同学能够自己独立实战一下 ,这样才能更好地掌握所学知识 ,提供自身的水平哦 . 加油 !

祝学习愉快 ,望采纳