0

I am referring to the Bootstrap Vue Scrollspy(https://bootstrap-vue.org/docs/directives/scrollspy/#scrollspy). I am using Nuxt js.

My elements are referenced correctly and are spying on the content. I would like to get the element/section that is currently being viewed to be updated in a div. I know that an active class is added to the element/section being viewed, but I am not sure how to get it.

This is what I have:

 <div id="mobilescrollspy">          <--- Scrollspy headings in a dropdown     
        <b-nav v-b-scrollspy>
          <b-nav-item-dropdown text="Dropdown">
            <b-dropdown-item class="text-base self-center" href="#item-1">
              Item 1 Heading
            </b-dropdown-item>
            <b-dropdown-item class="text-base self-center" href="#item-2">
              Item 2 Heading
            </b-dropdown-item>
            <b-dropdown-item class="text-base self-center" href="#item-3">
              Item 3 Heading
            </b-dropdown-item>
          </b-nav-item-dropdown>
        </b-nav>
</div>

<div class="content">                <--- The content itself
  <div id="item-1">
      This is the content for item 1
  </div>
  <div id="item-2">
      This is the content for item 2
  </div>
  <div id="item-3">
      This is the content for item 3
  </div>
</div>

If item 2 is in view, I want a text that shows: "Item 2 Heading", once I scroll to item 3, this div gets updated to "Item 2 Heading". How can I achieve this? Thanks for the help!

AlyssaAlex
  • 696
  • 2
  • 9
  • 33
  • What is the question? Since you haven't posted a working example, it's not clear if scrollspy is working properly and you simply want to listen to it or if your implementation is not working at all. Also note a [mcve] would greatly improve your chances of getting a useful answer. Without one, it's difficult to test any solution against your example. – tao Apr 20 '20 at 09:10
  • @tao Thanks for the comment. The scrollspy works as mentioned in my question, I just want to listen to it and find out which section is being currently viewed and store that in a div. – AlyssaAlex Apr 20 '20 at 09:13
  • You can find on the [docs page](https://bootstrap-vue.org/docs/directives/scrollspy/#events) you linked how to bind a function in your controller to a scrollspy event, under `Events`. – tao Apr 20 '20 at 09:15
  • @tao I have looked at that, yes, but I couldn't find the text that I could use from it like in my question: 'Item 1 Heading' etc. – AlyssaAlex Apr 20 '20 at 09:29
  • I've added an example on how you could use it. The event only returns the `id` of the currently active item, but that should be enough. – tao Apr 20 '20 at 11:01

1 Answers1

1

The event listener documented in scrollspy's documentation gives you the id of the currently active element. You can use it to display whatever you want.

I've put up a basic example here: https://codesandbox.io/s/competent-cherry-o4o6h?file=/src/App.vue

It's basic because it queries $el to find the active element and get it's innerHTML. Instead, in a real app, you could directly reference the object in the navigation which you used to render the navigation in the first place (and therefore avoid querying DOM).

To create this example, I only used code from the documentation, I added a computed property (getSectionTitle), and one optional feature: I noticed when scrolling to top there is no event emitted and I thought it would be good if I cleared the selected section (just as scrollspy no longer selects any element). So I added a scrollListener, in mounted, removed in beforeDestroy, which, when #nav-scorller scrolls to top, resets section to ''.
Other than that, it's quite basic.

Again, this extra listener is not really necessary. I just thought it would be good to show how it could be done, to serve as an example for anyone who might need it in the future.

tao
  • 82,996
  • 16
  • 114
  • 150