JS实现网站楼层导航效果代码实例

壹 ❀ 引言 对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片。 由于我前面也说了不打算使用JQ,所以想着用JS去实现它,实现并不难,主要得弄清滚动满足怎样的条件才应该点亮对应楼层,我们先看看实现效果: 贰 ❀ 实现思路 第一点,因为是由滚动触发的楼层判断,所以肯定离不开onscroll事件。 第二点,我们貌似要获取每个楼层顶端距离视窗顶部的距离,随着滚动条往下滚动,此距离会不断缩小,当接近到某个距离时我们判定此楼层入画,当然其它楼层都满足此判定。 而JQ提供了一个offset().top方法能获取这个值,js中只有一个offsetTop属性,获取