关于vh的滚动条事件

我自己想做一个 demo,使用了 vh 来定义了 4 个 section,然后想在滚动的时候显示对应的 a 锚点链接的背景颜色。请问实现的思路是怎么样的呢?以及有关的 js 代码。。

我在鼠标点击中使用了锚点来进行跳转,但是关于滚动条滚动时的 scrollTop 不能使用 vh,所以我很想搞明白使用什么方式来实现,其中我也想用到 classList 来 toggle 其中对应的 class,但是代码我却想不出来。

谢谢各位。

HTML:

<section id="bar-1" style="width: 100vw; height: 100vh; background: pink"></section>
<section id="bar-2" style="width: 100vw; height: 100vh; background: red">
</section><section id="bar-3" style="width: 100vw; height: 100vh; background: dodgerblue">
</section><section id="bar-4" style="width: 100vw; height: 100vh; background: purple"></section><div id="bar">
  <ul>
    <li><a href="#bar-1" class="active"></a></li>
    <li><a href="#bar-2"></a></li>
    <li><a href="#bar-3"></a></li>
    <li><a href="#bar-4"></a></li>
  </ul></div>

效果图:

https://img.mukewang.com/5becd05c0001196f08010622.jpg

喵喔喔
浏览 878回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript