Streaming live at 10am (PST)

Pagination seamless reload script workaround reloads navbar interaction element

Hey there,

Having a little trouble wrapping my head around this problem, concerning this page: https://www.bikeout.co/

I am using pagination with custom code to avoid reloading on the quote testimonials (near the footer of the page), but when clicking, the page resets the navbar interaction which normally would set the navbar from transparent to a color background on page scroll. As a result, when clicking, the navbar, which at that point in the page should have a background, goes transparent and is rendered invisible in that content section.

Any ideas? Thx!

Also, Webflow is amazing.

Code is as follows:

var containerSelector = ‘#seamless-replace’;
(document).pjax( '.w-pagination-wrapper a', containerSelector, { container: containerSelector, fragment: containerSelector, scrollTo: false, timeout: 2500, } ); // These 3 lines should reinitialize interactions (document).on(‘pjax:end’, function() {
Webflow.require(‘ix2’).init();
});

Make the code look like this

var containerSelector = ‘#seamless-replace’;
(document).pjax( '.w-pagination-wrapper a', containerSelector,
{
  container: containerSelector,
  fragment: containerSelector,
  scrollTo: false,
  timeout: 2500,
 });

 // These 3 lines should reinitialize interactions
(document).on(‘pjax:end’, function() {
 // Webflow.require(‘ix2’).init();
});

I’m simply commenting out the line that restarts webflow animations. Webflow.require(‘ix2’).init();. However, if the new items that get inserted to the page have some kind of animation, you’ll need to either:

  1. Disable the “on page load” animation
  2. Disable the animation that affects the new items that get inserted into the page

Amazing, worked great! Thanks for your help!

1 Like