elementor icon indicating copy to clipboard operation
elementor copied to clipboard
verified publisher icon elementor

[⌛ Awaiting Feedback] 🐞 Bug Report: Scroll snap breaks sticky header effect

Open DjulLau opened this issue 2 years ago • 10 comments

Prerequisites

  • [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • [X] The issue still exists against the latest stable version of Elementor.

Description

When activating scroll snapping on a page using sticky header effect (shrinking, color changing etc.) the header effects won't work anymore.

Steps to reproduce

  1. Create a sticky header with effect using some custom CSS like described here
  2. Test the header effect: working
  3. Activate scroll snap on the page
  4. Test the header effect again: not working

It seems that sticky elementor-sticky--effects classes are not applied anymore...

Isolating the problem

  • [X] This bug happens with only Elementor plugin active (and Elementor Pro).
  • [X] This bug happens with a Blank WordPress theme active (Hello theme).
  • [X] I can reproduce this bug consistently following the steps above.

System Info

System Info 


					
== Server Environment ==
	Operating System: Linux
	Software: Apache
	MySQL version: MariaDB Server v10.6.12
	PHP Version: 7.4.33
	PHP Memory Limit: 4096M
	PHP Max Input Vars: 2000000
	PHP Max Post Size: 512M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.2.1
	Site URL: https://www.lesjardinsdiode.com
	Home URL: https://www.lesjardinsdiode.com
	WP Multisite: No
	Max Upload Size: 512 MB
	Memory limit: 40M
	Max Memory limit: 4096M
	Permalink Structure: /%postname%/
	Language: en-US
	Timezone: 0
	Admin Email: [email protected]
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor
	Version: 2.7.1
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en_US
	User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/113.0

== Active Plugins ==
	Elementor
		Version: 3.13.2
		Author: Elementor.com

	Elementor Pro
		Version: 3.13.1
		Author: Elementor.com

	MouseWheel Smooth Scroll
		Version: 6.0
		Author: KubiQ


== Features ==
	Custom Fonts: 1
	Custom Icons: 0

== Integrations ==
	


== Elementor Experiments ==
	Optimized DOM Output: Active
	Improved Asset Loading: Active
	Improved CSS Loading: Active
	Inline Font Icons: Active
	Accessibility Improvements: Active
	Additional Custom Breakpoints: Active
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Active
	Upgrade Swiper Library: Active
	Grid Container: Inactive by default
	Default to New Theme Builder: Active
	Hello Theme Header & Footer: Active by default
	Editor Top Bar: Inactive
	Landing Pages: Active
	Nested Elements: Active
	Lazy Load Background Images: Active
	Page Transitions: Active
	Notes: Active
	Loop: Active
	Form Submissions: Active
	Scroll Snap: Active
	Menu: Active


== Log ==
	
PHP: showing 8 of 8PHP: 2023-04-18 11:03:00 [notice X 12][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor/core/common/modules/ajax/module.php::175] Undefined index: data [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-05-02 14:14:51 [error X 1][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php::295] Uncaught Error: Call to a member function update_meta() on null in /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php:295
Stack trace:
#0 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php(168): ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->save_conditions(2, Array)
#1 [internal function]: ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->ajax_save_theme_template_conditions(Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#2 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor/core/common/modules/ajax/module.php(175): call_user_func(Array, Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#3 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(308): Elementor\Core\Common\Modules\Ajax\Module->handle_ajax_request('')
#4 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(332): WP_Hook->apply_fi [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-05-02 14:57:53 [error X 4][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php::295] Uncaught Error: Call to a member function update_meta() on null in /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php:295
Stack trace:
#0 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php(168): ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->save_conditions(5, Array)
#1 [internal function]: ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->ajax_save_theme_template_conditions(Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#2 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor/core/common/modules/ajax/module.php(175): call_user_func(Array, Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#3 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(308): Elementor\Core\Common\Modules\Ajax\Module->handle_ajax_request('')
#4 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(332): WP_Hook->apply_fi [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-05-02 16:59:54 [error X 1][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php::295] Uncaught Error: Call to a member function update_meta() on bool in /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php:295
Stack trace:
#0 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php(168): ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->save_conditions(NULL, Array)
#1 [internal function]: ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->ajax_save_theme_template_conditions(Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#2 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor/core/common/modules/ajax/module.php(175): call_user_func(Array, Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#3 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(308): Elementor\Core\Common\Modules\Ajax\Module->handle_ajax_request('')
#4 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(332): WP_Hook->apply [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-05-15 10:47:46 [error X 3][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php::304] Uncaught Error: Call to a member function update_meta() on null in /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php:304
Stack trace:
#0 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php(177): ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->save_conditions(5, Array)
#1 [internal function]: ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->ajax_save_theme_template_conditions(Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#2 /home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor/core/common/modules/ajax/module.php(175): call_user_func(Array, Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
#3 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(308): Elementor\Core\Common\Modules\Ajax\Module->handle_ajax_request('')
#4 /home/mjqi4864/lesjardinsdiode.com/wp-includes/class-wp-hook.php(332): WP_Hook->apply_fi [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-05-15 14:40:49 [notice X 6][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor/modules/history/revisions-manager.php::363] Trying to access array offset on value of type null [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-05-15 15:34:13 [notice X 3][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor-pro/modules/assets-manager/asset-types/fonts-manager.php::252] Undefined index: editor_post_id [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-05-17 15:29:33 [notice X 1][/home/mjqi4864/lesjardinsdiode.com/wp-content/plugins/elementor/includes/managers/image.php::108] Trying to access array offset on value of type bool [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

Log: showing 20 of 202023-05-02 10:00:15 [info] elementor::elementor_updater Started 
2023-05-02 10:00:15 [info] Elementor/Upgrades - _on_each_version Start  
2023-05-02 10:00:15 [info] Elementor/Upgrades - _on_each_version Finished 
2023-05-02 10:00:15 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.12.1',
  'to' => '3.12.2',
)]
2023-05-02 10:00:15 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.12.1',
  'to' => '3.12.2',
)]
2023-05-11 16:44:33 [info] elementor::elementor_updater Started 
2023-05-11 16:44:33 [info] Elementor/Upgrades - _on_each_version Start  
2023-05-11 16:44:33 [info] Elementor/Upgrades - _on_each_version Finished 
2023-05-11 16:44:33 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.12.2',
  'to' => '3.13.1',
)]
2023-05-11 16:44:33 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.12.2',
  'to' => '3.13.1',
)]
2023-05-12 09:22:26 [info] elementor::elementor_updater Started 
2023-05-12 09:22:26 [info] Elementor/Upgrades - _on_each_version Start  
2023-05-12 09:22:26 [info] Elementor/Upgrades - _on_each_version Finished 
2023-05-12 09:22:26 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.13.1',
  'to' => '3.13.2',
)]
2023-05-12 09:22:26 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.13.1',
  'to' => '3.13.2',
)]
2023-05-12 09:22:38 [info] elementor-pro::elementor_pro_updater Started 
2023-05-12 09:22:38 [info] Elementor Pro/Upgrades - _on_each_version Start  
2023-05-12 09:22:38 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2023-05-12 09:22:38 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.12.2',
  'to' => '3.13.1',
)]
2023-05-12 09:22:38 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.12.2',
  'to' => '3.13.1',
)]

JS: showing 1 of 1JS: 2023-05-02 10:41:14 [error X 1][https://www.lesjardinsdiode.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.12.2:3:893415] elementorFrontend is not defined 



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatible

== Elementor Pro - Compatibility Tag ==

DjulLau avatar May 17 '23 17:05 DjulLau

Hello @DjulLau!

Thank you for submitting your issue! 🙏

Please allow us some time to investigate it, and get back to you with our findings. 🧐

Best regards

nicholaszein avatar May 18 '23 19:05 nicholaszein

I'm also experiencing this issue. The sticky header effects still work fine on pages that don't use the scroll snap experiment.

jomarieminney avatar Jun 20 '23 16:06 jomarieminney

i have the same issue someone know why i?

navered avatar Jul 23 '23 20:07 navered

I am also having the same issue. Can this be fixed soon? Thank you!

egtumaob10 avatar Jul 26 '23 10:07 egtumaob10

Hello everyone,

we just updated Elementor and Elementor Pro to version 3.16. In this version, we improved the behavior of the Scroll Snap with Containers.

After making some tests I cannot reproduce this issue.

I would appreciate it if you could give us some feedback related to this issue, and let us know if you are still experiencing this problem after this update.

As always, make sure you have made a backup before updating, and that you have cleared all levels of cache applicable to your website.

Please let us know if this issue has been resolved.

Kind regards

nicholaszein avatar Sep 23 '23 13:09 nicholaszein

Hello @nicholaszein this issue is still happening.

Wordpress Version 6.3.2 Elementor Pro Version 3.16.2 Hello Elementor theme Version: 2.8.1

Scrolling effects (transparency) does not work when scroll snap is enabled.

alistairjross avatar Oct 15 '23 12:10 alistairjross

It's also interfering with other sticky header (non-native) code, e.g. the Tracker Header from Dynamic.ooo

jomarieminney avatar Oct 22 '23 05:10 jomarieminney

Hello @nicholaszein this issue is still happening.

Wordpress Version 6.3.2 Elementor Pro Version 3.16.2 Hello Elementor theme Version: 2.8.1

Scrolling effects (transparency) does not work when scroll snap is enabled.

@nicholaszein any update on this? It has been over a month since I added to this thread and new releases of Elementor have been released and this issue still persists :(

alistairjross avatar Nov 19 '23 14:11 alistairjross

Hello @nicholaszein I experience the same issue. When I turn on the scroll snap, my custom code using the class .elementor-sticky--effects doesn't work any longer. Elementor, Hello Elementor and Wordpress updated to the latest versions. Here is a code example, which works fine without scroll snap:#hero.elementor-sticky--effects {background: #101010e3 !important; } Hope you can fix this problem! Thanks!

SchnoppDesign avatar Nov 23 '23 22:11 SchnoppDesign

Elementor scroll snap seems to be preventing the normal window scroll event in JavaScript.

gerardreches avatar Feb 11 '24 12:02 gerardreches

Same here, also motion effects not working, if scroll snap enabled. Also mentioned in https://github.com/elementor/elementor/issues/21581

AchimHartwig avatar Mar 05 '24 13:03 AchimHartwig

Hello @nicholaszein I experience the same issue. When I turn on the scroll snap, my custom code using the class .elementor-sticky--effects doesn't work any longer. Elementor, Hello Elementor and Wordpress updated to the latest versions. Here is a code example, which works fine without scroll snap:#hero.elementor-sticky--effects {background: #101010e3 !important; } Hope you can fix this problem! Thanks!

I have exactly same issue

DavePodosyan avatar Mar 13 '24 09:03 DavePodosyan

I see the "elementor-sticky-effects" class is indeed added after x pixels offset, however, the header is already sticky--active after 40px scroll. This should be the same as the offset, in my case 400px for testing purposes.

puregraphx avatar Apr 05 '24 09:04 puregraphx

Unfortunately, I have had the same problem since the Scroll Snap feature was introduced in Elementor. It is not possible to use Scroll Snap and the Sticky Offset Effect at the same time. The Scroll Snap function breaks the Offset Effect.

I am currently using Elementor Pro version 3.22.1.

The error persists even after deactivating all plugins and using other themes.

It is really a shame that both cannot be used together. I have been waiting for a fix for this problem since 2023.

I would be very happy to see a resolution. Hope you can fix this problem! Thanks!

HOFERmedia avatar Jul 08 '24 09:07 HOFERmedia