Sticky Header Effects for Elementor - Version 1.2.0

Version Description

  • Removed: Sticky Header feature(Elementor fixed theirs)
  • Added: Transparent header feature
  • Added: Compatibility with the new Elementor 2.1 version
  • Added: Change javascript to external file
  • Fixed: Bugs
Download this release

Release Info

Developer rwattner
Plugin Icon 128x128 Sticky Header Effects for Elementor
Version 1.2.0
Comparing to
See all releases

Code changes from version 1.1.2 to 1.2.0

Files changed (5) hide show
  1. assets/css/she-header-style.css +2 -2
  2. assets/js/she-header.js +89 -2
  3. modules/transparent/module.php +19 -126
  4. readme.txt +18 -4
  5. sticky-header-effects-for-elementor.php +3 -3
assets/css/she-header-style.css CHANGED
@@ -15,14 +15,14 @@ Header Style
15
  margin-bottom:0;
16
  padding-top:0;
17
  padding-bottom:0;
18
- position:fixed;
19
  top:0;
20
 
21
  }
22
 
23
  .she-header-transparent-yes{
24
  position:fixed;
25
- background-color: transparent;
26
  z-index: 99;
27
  width: 100%;
28
  -webkit-transition: all 0.4s ease-in-out;
15
  margin-bottom:0;
16
  padding-top:0;
17
  padding-bottom:0;
18
+ position:fixed;
19
  top:0;
20
 
21
  }
22
 
23
  .she-header-transparent-yes{
24
  position:fixed;
25
+ background-color: rbga(0,0,0,0) !important;
26
  z-index: 99;
27
  width: 100%;
28
  -webkit-transition: all 0.4s ease-in-out;
assets/js/she-header.js CHANGED
@@ -23,7 +23,94 @@ TRANSPARENT EFFECT
23
 
24
  function sheHeader() {
25
 
26
- // Add header class to body after pass add to cart buttom
27
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
 
29
  };
23
 
24
  function sheHeader() {
25
 
26
+
27
+ var header = $j('.she-header-yes'),
28
+ container = $j('.she-header-yes .elementor-container'),
29
+ header_elementor = $j('.elementor-edit-mode .she-header-yes'),
30
+ data_settings = header.data('settings');
31
+
32
+ var responsive_settings = data_settings["transparent_on"],
33
+ width = $j(window).width();
34
+
35
+ // Check responsive is enabled
36
+ if( typeof width != 'undefined' && width) {
37
+ if( width >= 1025 ) {
38
+ var enabled = "desktop";
39
+ }else if (width > 767 && width < 1025 ) {
40
+ var enabled = "tablet";
41
+ }else if (width <= 767 ) {
42
+ var enabled = "mobile";
43
+ }
44
+ }
45
+
46
+ if ($j.inArray(enabled, responsive_settings)!='-1') {
47
+ // height shrink
48
+
49
+ var scroll_distance = data_settings["scroll_distance"];
50
+
51
+ var transparent_header = data_settings["transparent_header_show"];
52
+
53
+ var background = data_settings["background"];
54
+
55
+ var bottom_border_color = data_settings["custom_bottom_border_color"],
56
+ bottom_border_view = data_settings["bottom_border"],
57
+ bottom_border_width = data_settings["custom_bottom_border_width"];
58
+
59
+ var shrink_header = data_settings["shrink_header"],
60
+ data_height = data_settings["custom_height_header"],
61
+ data_height_tablet = data_settings["custom_height_header_tablet"],
62
+ data_height_mobile = data_settings["custom_height_header_mobile"];
63
+
64
+ // height shrink
65
+ if( typeof data_height != 'undefined' && data_height) {
66
+ if( width >= 1025 ) {
67
+ var shrink_height = data_height["size"];
68
+ }else if (width > 767 && width < 1025 ) {
69
+ var shrink_height = data_height_tablet["size"];
70
+ }else if (width <= 767 ) {
71
+ var shrink_height = data_height_mobile["size"];
72
+ }
73
+ }
74
+
75
+ // border bottom
76
+ if( typeof bottom_border_width != 'undefined' && bottom_border_width) {
77
+ var bottom_border = bottom_border_width["size"] + "px solid " + bottom_border_color;
78
+ }
79
+
80
+ // scroll function
81
+ $j(window).scroll(function() {
82
+ var scroll = $j(window).scrollTop();
83
+
84
+ if (header_elementor) {
85
+ header_elementor.css("position", "relative");
86
+ }
87
+
88
+ if (scroll >= scroll_distance["size"]) {
89
+ header.removeClass('header').addClass("she-header");
90
+ header.css("background-color", background);
91
+ header.css("border-bottom", bottom_border);
92
+ header.removeClass('she-header-transparent-yes');
93
+ if( shrink_header == "yes" ) {
94
+ header.css({"padding-top":"0", "padding-bottom":"0", "margin-top":"0", "margin-bottom":"0"});
95
+ container.css({"min-height": shrink_height, "transition": "all 0.4s ease-in-out", "-webkit-transition": "all 0.4s ease-in-out", "-moz-transition": "all 0.4s ease-in-out"});
96
+
97
+ }
98
+
99
+ } else {
100
+ header.removeClass("she-header").addClass('header');
101
+ header.css("background-color", "");
102
+ header.css("border-bottom", "");
103
+ if(transparent_header == "yes" ){
104
+ header.addClass('she-header-transparent-yes');
105
+ }
106
+ if( shrink_header == "yes" ) {
107
+ header.css({"padding-top":"", "padding-bottom":"", "margin-top":"", "margin-bottom":""});
108
+ container.css("min-height", "");
109
+ }
110
+ }
111
+ });
112
+ }
113
+
114
+
115
 
116
  };
modules/transparent/module.php CHANGED
@@ -40,10 +40,23 @@ class Module extends Module_Base {
40
  'label_off' => __( 'Off', 'bew-header' ),
41
  'return_value' => 'yes',
42
  'default' => '',
43
- 'frontend_available' => true,
44
  'prefix_class' => 'she-header-'
45
  ]
46
  );
 
 
 
 
 
 
 
 
 
 
 
 
 
47
 
48
  $element->add_control(
49
  'transparent_on',
@@ -83,6 +96,7 @@ class Module extends Module_Base {
83
  ],
84
  'size_units' => [ 'px'],
85
  'description' => __( 'Choose the scroll distance to enable Sticky Header Effects', 'she-header' ),
 
86
  'condition' => [
87
  'transparent!' => '',
88
  ],
@@ -92,7 +106,7 @@ class Module extends Module_Base {
92
  $element->add_control(
93
  'settings_notice',
94
  [
95
- 'raw' => __( 'Remeber: The settings below will not be applied until the page is scrolled the distance set above', 'she-header' ),
96
  'type' => Controls_Manager::RAW_HTML,
97
  'content_classes' => 'elementor-descriptor',
98
  'condition' => [
@@ -104,7 +118,7 @@ class Module extends Module_Base {
104
  $element->add_control(
105
  'transparent_header_show',
106
  [
107
- 'label' => __( 'Sticky Header', 'she-header' ),
108
  'type' => Controls_Manager::SWITCHER,
109
  'separator' => 'before',
110
  'label_on' => __( 'On', 'she-header' ),
@@ -115,24 +129,11 @@ class Module extends Module_Base {
115
  'condition' => [
116
  'transparent!' => '',
117
  ],
118
- 'description' => __( 'Bring header down on top of page and make it sticky', 'she-header' ),
119
  'prefix_class' => 'she-header-transparent-'
120
  ]
121
  );
122
-
123
- $element->add_control(
124
- 'sticky_header_notice',
125
- [
126
- 'raw' => __( 'NOTICE: Please disable Elementor Pro sticky setting', 'she-header' ),
127
- 'type' => Controls_Manager::RAW_HTML,
128
- 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
129
- 'condition' => [
130
- 'transparent_header_show' => 'yes',
131
- 'transparent!' => '',
132
- ],
133
- ]
134
- );
135
-
136
  $element->add_control(
137
  'background_show',
138
  [
@@ -281,120 +282,12 @@ class Module extends Module_Base {
281
  add_action( 'elementor/element/section/section_advanced/after_section_end', [ $this, 'register_controls' ] );
282
  }
283
 
284
- add_action( 'elementor/frontend/element/after_render', [ $this, 'after_render'], 10, 1 );
285
 
286
  add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] );
287
  add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
288
 
289
  }
290
-
291
- public function after_render($element) {
292
- $settings = $element->get_settings();
293
- if( $element->get_settings( 'transparent' ) == 'yes' ) {
294
- $background = $settings['background'];
295
- $scroll_distance = $settings['scroll_distance'];
296
- $scroll_distance_size = $scroll_distance['size']
297
 
298
- ?>
299
- <script type="text/javascript">
300
- ( function( $ ) {
301
- "use strict";
302
- var sheTransparentElementorFront = {
303
- init: function() {
304
- elementorFrontend.hooks.addAction('frontend/element_ready/global', sheTransparentElementorFront.initWidget);
305
- },
306
- initWidget: function( $scope ) {
307
-
308
- var header = $('.she-header-yes'),
309
- container = $('.she-header-yes .elementor-container'),
310
- header_elementor = $('.elementor-edit-mode .she-header-yes'),
311
- data_settings = header.data('settings');
312
-
313
- var responsive_settings = data_settings["transparent_on"],
314
- width = $(window).width();
315
-
316
- // Check responsive is enabled
317
- if( typeof width != 'undefined' && width) {
318
- if( width >= 1025 ) {
319
- var enabled = "desktop";
320
- }else if (width > 767 && width < 1025 ) {
321
- var enabled = "tablet";
322
- }else if (width <= 767 ) {
323
- var enabled = "mobile";
324
- }
325
- }
326
-
327
- if ($.inArray(enabled, responsive_settings)!='-1') {
328
- // height shrink
329
-
330
- var background = data_settings["background"];
331
-
332
- var bottom_border_color = data_settings["custom_bottom_border_color"],
333
- bottom_border_view = data_settings["bottom_border"],
334
- bottom_border_width = data_settings["custom_bottom_border_width"];
335
-
336
- var shrink_header = data_settings["shrink_header"],
337
- data_height = data_settings["custom_height_header"],
338
- data_height_tablet = data_settings["custom_height_header_tablet"],
339
- data_height_mobile = data_settings["custom_height_header_mobile"];
340
-
341
- // height shrink
342
- if( typeof data_height != 'undefined' && data_height) {
343
- if( width >= 1025 ) {
344
- var shrink_height = data_height["size"];
345
- }else if (width > 767 && width < 1025 ) {
346
- var shrink_height = data_height_tablet["size"];
347
- }else if (width <= 767 ) {
348
- var shrink_height = data_height_mobile["size"];
349
- }
350
- }
351
-
352
- // border bottom
353
- if( typeof bottom_border_width != 'undefined' && bottom_border_width) {
354
- var bottom_border = bottom_border_width["size"] + "px solid " + bottom_border_color;
355
- }
356
-
357
- // scroll function
358
- $(window).scroll(function() {
359
- var scroll = $(window).scrollTop();
360
-
361
- if (header_elementor) {
362
- header_elementor.css("position", "relative");
363
- }
364
-
365
- if (scroll >= <?php echo $scroll_distance_size; ?>) {
366
- header.removeClass('header').addClass("she-header");
367
- header.css("background-color", background);
368
- header.css("border-bottom", bottom_border);
369
- header.removeClass('she-header-transparent-yes');
370
- if( shrink_header == "yes" ) {
371
- header.css({"padding-top":"0", "padding-bottom":"0", "margin-top":"0", "margin-bottom":"0"});
372
- container.css({"min-height": shrink_height, "transition": "all 0.4s ease-in-out", "-webkit-transition": "all 0.4s ease-in-out", "-moz-transition": "all 0.4s ease-in-out"});
373
-
374
- }
375
-
376
- } else {
377
- header.removeClass("she-header").addClass('header');
378
- header.css("background-color", "");
379
- header.css("border-bottom", "");
380
- header.addClass('she-header-transparent-yes');
381
- if( shrink_header == "yes" ) {
382
- header.css({"padding-top":"", "padding-bottom":"", "margin-top":"", "margin-bottom":""});
383
- container.css("min-height", "");
384
- }
385
- }
386
- });
387
- }
388
-
389
- }
390
- };
391
- $(window).on('elementor/frontend/init', sheTransparentElementorFront.init);
392
- }( jQuery ) );
393
- </script>
394
-
395
- <?php }
396
- }
397
-
398
  public function enqueue_styles() {
399
  $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
400
 
40
  'label_off' => __( 'Off', 'bew-header' ),
41
  'return_value' => 'yes',
42
  'default' => '',
43
+ 'frontend_available' => true,
44
  'prefix_class' => 'she-header-'
45
  ]
46
  );
47
+
48
+ $element->add_control(
49
+ 'sticky_header_notice',
50
+ [
51
+ 'raw' => __( 'IMPORTANT: Sticky Header Effects only works with Elementor Pro sticky option enabled.', 'she-header' ),
52
+ 'type' => Controls_Manager::RAW_HTML,
53
+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
54
+ 'condition' => [
55
+
56
+ 'transparent!' => '',
57
+ ],
58
+ ]
59
+ );
60
 
61
  $element->add_control(
62
  'transparent_on',
96
  ],
97
  'size_units' => [ 'px'],
98
  'description' => __( 'Choose the scroll distance to enable Sticky Header Effects', 'she-header' ),
99
+ 'frontend_available' => true,
100
  'condition' => [
101
  'transparent!' => '',
102
  ],
106
  $element->add_control(
107
  'settings_notice',
108
  [
109
+ 'raw' => __( 'Remember: The settings below will not be applied until the page is scrolled the distance set above', 'she-header' ),
110
  'type' => Controls_Manager::RAW_HTML,
111
  'content_classes' => 'elementor-descriptor',
112
  'condition' => [
118
  $element->add_control(
119
  'transparent_header_show',
120
  [
121
+ 'label' => __( 'Transparent Header', 'she-header' ),
122
  'type' => Controls_Manager::SWITCHER,
123
  'separator' => 'before',
124
  'label_on' => __( 'On', 'she-header' ),
129
  'condition' => [
130
  'transparent!' => '',
131
  ],
132
+ 'description' => __( 'Initial transparent header', 'she-header' ),
133
  'prefix_class' => 'she-header-transparent-'
134
  ]
135
  );
136
+
 
 
 
 
 
 
 
 
 
 
 
 
 
137
  $element->add_control(
138
  'background_show',
139
  [
282
  add_action( 'elementor/element/section/section_advanced/after_section_end', [ $this, 'register_controls' ] );
283
  }
284
 
 
285
 
286
  add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] );
287
  add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
288
 
289
  }
 
 
 
 
 
 
 
290
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
  public function enqueue_styles() {
292
  $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
293
 
readme.txt CHANGED
@@ -3,10 +3,10 @@
3
  Contributors: rwattner, dgovea
4
  Donate Link: https://www.paypal.me/StickyHeaderEffects
5
  Tags: Elementor, Elementor Page Builder, Elements, Elementor Add-ons, Add-ons, Page Builder, Widgets, Briefcasewp
6
- Requires at least: 4.5.9
7
- Tested up to: 4.9.4
8
  Requires PHP: 5.4
9
- Stable tag: 1.1.2
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
 
@@ -24,7 +24,7 @@ This plugin is meant to be an add-on to Elementor Pro page builder as it's not a
24
 
25
  * Options panel built-in to Elementor Pro's advanced section options. - Settings are right where they should be without cluttering up your workspace.
26
  * Apply options on scrolling - The scrolling distance for the Sticky Header Effects to be applied is responsively adjustable for the best results in any situation.
27
- * Sticky Header - Uses position to move header section down on top of the page. No need for problem causing negative margins.
28
  * Header Background - Color options for header after scrolling with full HEX, RGBA, and Color Name support.
29
  * Bottom Border - Allows user to change the color and thickness of the bottom border upon scrolling.
30
  * Shrink - An effect which changes section min-height to maximize space and achieve a slim style without losing functionality.
@@ -82,6 +82,13 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
82
 
83
  == Changelog ==
84
 
 
 
 
 
 
 
 
85
  = 1.1.2 =
86
  - Fixed: Bugs
87
 
@@ -100,6 +107,13 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
100
 
101
  == Upgrade Notice ==
102
 
 
 
 
 
 
 
 
103
  = 1.1.2 =
104
  Bug fixes
105
 
3
  Contributors: rwattner, dgovea
4
  Donate Link: https://www.paypal.me/StickyHeaderEffects
5
  Tags: Elementor, Elementor Page Builder, Elements, Elementor Add-ons, Add-ons, Page Builder, Widgets, Briefcasewp
6
+ Requires at least: 4.9.0
7
+ Tested up to: 4.9.6
8
  Requires PHP: 5.4
9
+ Stable tag: 1.2.0
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
 
24
 
25
  * Options panel built-in to Elementor Pro's advanced section options. - Settings are right where they should be without cluttering up your workspace.
26
  * Apply options on scrolling - The scrolling distance for the Sticky Header Effects to be applied is responsively adjustable for the best results in any situation.
27
+ * Transparent Header - Uses position to move header section down on top of the page. No need for problem causing negative margins.
28
  * Header Background - Color options for header after scrolling with full HEX, RGBA, and Color Name support.
29
  * Bottom Border - Allows user to change the color and thickness of the bottom border upon scrolling.
30
  * Shrink - An effect which changes section min-height to maximize space and achieve a slim style without losing functionality.
82
 
83
  == Changelog ==
84
 
85
+ = 1.2.0 =
86
+ - Removed: Sticky Header feature(Elementor fixed theirs)
87
+ - Added: Transparent header feature
88
+ - Added: Compatibility with the new Elementor 2.1 version
89
+ - Added: Change javascript to external file
90
+ - Fixed: Bugs
91
+
92
  = 1.1.2 =
93
  - Fixed: Bugs
94
 
107
 
108
  == Upgrade Notice ==
109
 
110
+ = 1.2.0 =
111
+ Removed: Sticky Header feature(Elementor fixed theirs)
112
+ Added: Transparent header feature
113
+ Added: Compatibility with the new Elementor 2.1 version
114
+ Added: Change javascript to external file
115
+ Fixed: Bugs
116
+
117
  = 1.1.2 =
118
  Bug fixes
119
 
sticky-header-effects-for-elementor.php CHANGED
@@ -3,7 +3,7 @@
3
  * Plugin Name: Sticky Header Effects for Elementor
4
  * Plugin URI: http://robertwattner.com/sticky-header-effects-for-elementor
5
  * Description: Options and features that extend Elementor Pro's sticky header capabilities.
6
- * Version: 1.1.2
7
  * Author: Rwattner
8
  * Author URI: http://robertwattner.com
9
  * Requires at least: 4.9.0
@@ -19,8 +19,8 @@
19
 
20
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
 
22
- define( 'SHE_HEADER_VERSION', '1.1.2' );
23
- define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.1.1' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );
26
  define( 'SHE_HEADER_PLUGIN_BASE', plugin_basename( SHE_HEADER__FILE__ ) );
3
  * Plugin Name: Sticky Header Effects for Elementor
4
  * Plugin URI: http://robertwattner.com/sticky-header-effects-for-elementor
5
  * Description: Options and features that extend Elementor Pro's sticky header capabilities.
6
+ * Version: 1.2.0
7
  * Author: Rwattner
8
  * Author URI: http://robertwattner.com
9
  * Requires at least: 4.9.0
19
 
20
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
 
22
+ define( 'SHE_HEADER_VERSION', '1.2.0' );
23
+ define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.1.2' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );
26
  define( 'SHE_HEADER_PLUGIN_BASE', plugin_basename( SHE_HEADER__FILE__ ) );