title: Is there a way to update a scrollspy dropdown's text when it is not spying on anything to a default text?
body: <p>I am new to Vue and am using Bootstrap Vue Scrollspy(<a href="https://bootstrap-vue.org/docs/directives/scrollspy#example-using-navs" rel="nofollow noreferrer">https://bootstrap-vue.org/docs/directives/scrollspy#example-using-navs</a>). My dropdown is sticky and is spying on all the content referenced. The sticky dropdown has a text that updates with the current section in view.</p>
  
  <p>This is like my code: <a href="https://codesandbox.io/s/festive-tree-1w3hx?file=/src/App.vue" rel="nofollow noreferrer">https://codesandbox.io/s/festive-tree-1w3hx?file=/src/App.vue</a></p>
  
  <p>Is there any way I can set the text of my dropdown to a default text like from the link above it is "Contents"? So that every time the scrollspying is done, it just turns the text of the dropdown to a default text? What I do not like about this approach is that I need a height property on <code>#nav-scroller</code> and since I am dealing with dynamic data, I don't see this as an option for me. The double scrollbars are also something I do not want. </p>
  
  <p>I tried to make the dropdown sticky in my code by using Stickybits(<a href="https://dollarshaveclub.github.io/stickybits/" rel="nofollow noreferrer">https://dollarshaveclub.github.io/stickybits/</a>), I also tried checking up if they had a feature where I can get an event fired when the position is not sticky then the text of the dropdown changes to the default text, but from my research, I don't think they do?</p>
  
  <p>In addition, I have tried doing an overflow hidden but that doesn't solve the issue. </p>
  
  <p>I am trying to find a way through which this is achievable without jQuery. Would appreciate some help, thank you. </p>