# [Bootstrap] 滾動監聽（Scrollspy） ###### tags: `Bootstrap` 滾動監聽（Scrollspy）插件，即自動更新導航插件，會根據滾動條的位置自動更新對應的導航目標。其基本的實現是隨著您的滾動，基於滾動條的位置嚮導航欄添加.active class。 如果您想要單獨引用該插件的功能，那麼您需要引用scrollspy.js。或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js。 ### 用法 向頂部導航添加滾動監聽行為： 通過data屬性：向您想要監聽的元素（通常是body）添加data-spy="scroll"。然後添加帶有Bootstrap .nav組件的父元素的ID或class的屬性data-target。為了它能正常工作，您必須確保頁面主體中有匹配所要監聽鏈接的ID的元素存在。 ``` <body data-spy =“ scroll” data-target =“main-nav”> ... <div class =“ navbar-example”> <ul class =“ nav nav-tabs”> ... </ ul> </ div> ... </ body> ``` 通過JavaScript：您可以通過JavaScript調用滾動監聽，選取要監聽的元素，然後調用.scrollspy()函數： ``` //Init Scrollspy $('body').scrollspy({ target:'#main-nav'}); //Smooth Scrolling $('#main-nav a').on('click',function(event){ if(this.hash !==""){ event.preventDefault(); const hash = this.hash; $('html,body').animate({ scrollTop: $(hash).offset().top }, 700, function(){ window.location.hash = hash; }) } }) ```