当前位置:主页 > JavsScript库 > 菜单 / 导航 >

Scrollspy平滑滚动库 – scrollspy.js
栏目分类:菜单 / 导航   发布日期:2021-09-13   浏览次数:

一个轻量级的纯 JavaScript scrollspy 库,它使导航链接能够在具有scrollspy支持的页面部分之间平滑滚动。

使用:

下载并在网页底部包含 scrollspy.js 库。

<script src="src/js/scrollspy.js"></script>

创建导航及其相应的分段内容。

<nav class="navbar">
  <ul>
    <li><a class="active" href="#home" title="Home">Home</a></li>
    <li><a href="#portfolio" title="Portfolio">Portfolio</a></li>
    <li><a href="#about" title="About">About</a></li>
    <li><a href="#contact" title="Contact">Contact</a></li>
  </ul>
</nav>
 
<section id="home" class="page">
  <div class="container">
    <h2>Home</h2>
  </div>
</section>
 
<section id="portfolio" class="page">
  <div class="container">
    <h2>Portfolio</h2>
  </div>
</section>
 
<section id="about" class="page">
  <div class="container">
    <h2>About</h2>
  </div>
</section>
 
<section id="contact" class="page">
  <div class="container">
    <h2>Contact</h2>
  </div>
</section>

初始化 scrollspy 库。就是这样。

var menu = document.querySelector('.navbar');
scrollSpy(menu);

在 CSS 中设置活动菜单项的样式:

.navbar a.active {
  color: #fff;
  line-height: 50px;
  text-decoration: none;
}

覆盖默认滚动速度。

scrollSpy(menu,2000);

对平滑滚动应用缓动效果。

// 'easeOutSine', 'easeInOutSine' or 'easeInOutQuint', default value easeInOutQuint
scrollSpy(menu, 2000, 'easeInOutQuint');

官方网站:https://github.com/ederssouza/vanillajs-scrollspy

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库