Fixed elements are not behaving as such after page transition

[warudin]

Hi,

I've got some fixed elements on a website in which I'm trying to integrate smoothState.js. I noticed that elements that have position: fixed; are not sticky anymore after a pageload, they seem relatively positioned afterwards although they are still marked as sticky in the debugger.

Is this a known problem or could there be something wrong in my code?

jQuery(function() {
	'use strict';
	var options = {
			prefetch: true,
			cacheLength: 2,
			blacklist: '.gform_wrapper *',
			onStart: {
				duration: 250, // Duration of our animation
				render: function($container) {
					// Add your CSS animation reversing class
					$container.removeClass('fadeInRight');
					$container.addClass('is-exiting animated fadeOutRight');


					// Restart your animation
					smoothState.restartCSSAnimations();
				}
			},
			onReady: {
				duration: 0,
				render: function($container, $newContent) {
					// Remove your CSS animation reversing class
					$container.removeClass('is-exiting fadeOutRight');
					$container.addClass('fadeInRight');

					// Inject the new content
					$container.html($newContent);

					jQuery(window).trigger('ready');
				}
			},
			onAfter: function($container) {
				console.log('onAfter');
				loadFunctions();
				// jQuery(window).trigger('load');
			},
		},
		smoothState = jQuery('#content-wrapper').smoothState(options).data('smoothState');
});

[hentrev]

+1

[shaunw]

ever figure this out?

[warudin]

Unfortunately: no. I stopped using smoothState because I couldn't find a solution for this.

[LazyDevStudio]

Any element with position:fixed will lose its positioning if you apply a transform to any of its ancestors, which is probably what your FadeInRight animation does when you transition pages in and out. Remove the transform property from its parents and the fixed element will stay fixed.