Pagination seamless reload script workaround reloads navbar interaction element

Design help Custom code
1

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();
});

2

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
1 Like
3

Amazing, worked great! Thanks for your help!

1 Like
4

Hey Jean, just another quick question on this.

For some reason, this is now broke on my homepage: http://bikeout.co

But it works on other pages: https://www.bikeout.co/trips/philly-phoenixville-2020

Any clues why that would be different on the homepage? The code loads from the footer / custom code in the Project settings.

Thanks :slight_smile:

1 Like
5

Actually, disregard! I figured it out. Had a competing script. Sorry :slight_smile:

1 Like