All geek questions in one place

Unable to correctly update Scrollspy Bootstrap spying on <body> element

I refer to this post regarding the Bootstrap scrollspy component. In my code, I create a new scrollspy to spy on the body element using:

 $("body").scrollspy({ offset: 25 });

Later in my code, I make an AJAX call and add / remove elements from the page. This causes the scrollspy to shift, so I need to update scrollspy. I tried to perform this update operation in various ways, for example:

 $("body").scrollspy("refresh");

and

 $('[data-spy="scroll"]').each(function () { $(this).scrollspy('refresh'); });

However, none of these code snippets cause any changes to scrollspy's behavior. I believe this is because scrollspy spies directly on the body element, but I'm not sure how to update scrollspy after my AJAX calls. Does anyone know how I can update my scrollspy?

+6
source share
1 answer

It seems that updating the scrollspy installed on spy in the body element is not possible by calling $("body").scrollspy() . To use the update functionality registered on the Bootstrap website, I had to explicitly declare the data-spy and data-target attributes of the body tag (where scrollingNav is the id on the nav panel that renders scrolling):

 <body data-spy="scroll" data-target="#scrollingNav">

Then, to update this scrollspy when the elements were dynamically added / removed from the page, I used the following method:

 function refreshScrollSpy() { $('[data-spy="scroll"]').each(function () { $(this).scrollspy('refresh'); }); };
+5
source

Source: https://habr.com/ru/post/973711/

More articles:


All Articles