Sticky Header Effects for Elementor - Version 1.1.0

Version Description

*Added: Sticky header feature *Added: Bottom border feature *Fixed: Bugs with tablet and mobile responsive modes *Fixed: Padding issues when using the "shrink" effect

Download this release

Release Info

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

Code changes from version 1.0.0 to 1.1.0

Files changed (4) hide show
  1. assets/css/she-header-style.css +25 -6
  2. modules/transparent/module.php +205 -38
  3. readme.txt +16 -12
  4. sticky-header-effects-for-elementor.php +2 -2
assets/css/she-header-style.css CHANGED
@@ -1,18 +1,37 @@
1
  /*------------------------------------------------------------------
2
  Header Style
3
  -------------------------------------------------------------------*/
4
- .header {
5
-
6
- background-color: rgba(0, 0, 0, 0);
7
  z-index:99;
8
  width: 100%;
9
 
10
  }
11
 
12
- .she-header{
13
-
14
  background-color: rgba(255, 255, 255, 0.5);
15
  z-index:99;
16
  width: 100%;
 
 
 
 
 
17
 
18
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  /*------------------------------------------------------------------
2
  Header Style
3
  -------------------------------------------------------------------*/
4
+ .header {
 
 
5
  z-index:99;
6
  width: 100%;
7
 
8
  }
9
 
10
+ .she-header{
 
11
  background-color: rgba(255, 255, 255, 0.5);
12
  z-index:99;
13
  width: 100%;
14
+ margin-top:0;
15
+ margin-bottom:0;
16
+ padding-top:0;
17
+ padding-bottom:0;
18
+ position:fixed;
19
 
20
+ }
21
+
22
+ .she-header-transparent-yes{
23
+ position:fixed;
24
+ background-color: transparent;
25
+ z-index: 99;
26
+ width: 100%;
27
+ -webkit-transition: all 0.4s ease-in-out;
28
+ -moz-transition: all 0.4s ease-in-out;
29
+ -o-transition: all 0.4s ease-in-out;
30
+ -ms-transition: all 0.4s ease-in-out;
31
+ transition: all 0.4s ease-in-out;
32
+ }
33
+
34
+ .elementor-editor-active .she-header-transparent-yes {
35
+ position:relative;
36
+ }
37
+
modules/transparent/module.php CHANGED
@@ -82,39 +82,159 @@ class Module extends Module_Base {
82
  ],
83
  ],
84
  'size_units' => [ 'px'],
85
- 'description' => __( 'Choose the scroll distance to enabled the transparent effect', 'she-header' ),
86
  'condition' => [
87
  'transparent!' => '',
88
  ],
89
  ]
90
  );
91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
 
93
  $element->add_control(
94
  'background',
95
  [
96
- 'label' => __( 'Background Color', 'she-header' ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  'type' => Controls_Manager::COLOR,
98
- 'label_block' => 'true',
99
  'condition' => [
100
- 'stretch_section' => '',
101
- 'transparent!' => ''
102
  ],
103
  'render_type' => 'none',
104
  'frontend_available' => true,
105
  ]
106
  );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
 
108
  $element->add_control(
109
  'shrink_header',
110
  [
111
  'label' => __( 'Shrink', 'she-header' ),
112
  'type' => Controls_Manager::SWITCHER,
 
113
  'label_on' => __( 'On', 'she-header' ),
114
  'label_off' => __( 'Off', 'she-header' ),
115
  'return_value' => 'yes',
116
  'default' => '',
117
  'frontend_available' => true,
 
118
  'condition' => [
119
  'transparent!' => '',
120
  ],
@@ -136,16 +256,15 @@ class Module extends Module_Base {
136
  ],
137
  ],
138
  'size_units' => [ 'px'],
139
- 'description' => __( 'Choose the header height after scrolling', 'she-header' ),
140
  'condition' => [
141
- 'shrink_header' => 'yes',
142
  'transparent!' => '',
143
  ],
144
  'frontend_available' => true,
145
  ]
146
  );
147
 
148
-
149
  $element->end_controls_section();
150
  }
151
 
@@ -166,6 +285,7 @@ class Module extends Module_Base {
166
 
167
  add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] );
168
  add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
 
169
  }
170
 
171
  public function after_render($element) {
@@ -185,41 +305,86 @@ class Module extends Module_Base {
185
  },
186
  initWidget: function( $scope ) {
187
 
188
- var header = $('.she-header-yes');
189
- var container = $('.she-header-yes .elementor-container');
190
-
191
- var data_settings = header.data('settings');
192
- var background = data_settings["background"];
193
- var data_height = data_settings["custom_height_header"];
194
- var data_height_tablet = data_settings["custom_height_header_tablet"];
195
- var data_height_mobile = data_settings["custom_height_header_mobile"];
196
- var width = $(window).width();
197
 
198
- if( typeof data_height != 'undefined' && data_height) {
199
- if( width > 768 ) {
200
- var shrink_height = data_height["size"];
201
- }else if (width > 480 && width < 768 ) {
202
- var shrink_height = data_height_tablet["size"];
203
- }else if (width < 480 ) {
204
- var shrink_height = data_height_mobile["size"];
 
 
 
 
205
  }
206
  }
207
-
208
- $(window).scroll(function() {
209
- var scroll = $(window).scrollTop();
210
-
211
- if (scroll >= <?php echo $scroll_distance_size; ?>) {
212
- header.removeClass('header').addClass("she-header");
213
- header.css("background-color", background);
214
- 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"});
215
 
216
- } else {
217
- header.removeClass("she-header").addClass('header');
218
- header.css("background-color", "");
219
- container.css("min-height", "");
220
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
  }
222
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
 
224
  }
225
  };
@@ -241,7 +406,7 @@ class Module extends Module_Base {
241
  );
242
 
243
  }
244
-
245
  public function enqueue_scripts() {
246
  $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
247
 
@@ -255,4 +420,6 @@ class Module extends Module_Base {
255
  false
256
  );
257
  }
 
 
258
  }
82
  ],
83
  ],
84
  'size_units' => [ 'px'],
85
+ 'description' => __( 'Choose the scroll distance to enable Sticky Header Effects', 'she-header' ),
86
  'condition' => [
87
  'transparent!' => '',
88
  ],
89
  ]
90
  );
91
 
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' => [
99
+ 'transparent!' => '',
100
+ ],
101
+ ]
102
+ );
103
+
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' ),
111
+ 'label_off' => __( 'Off', 'bew-header' ),
112
+ 'return_value' => 'yes',
113
+ 'default' => '',
114
+ 'frontend_available' => true,
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
+ [
139
+ 'label' => __( 'Header Background', 'she-header' ),
140
+ 'type' => Controls_Manager::SWITCHER,
141
+ 'separator' => 'before',
142
+ 'label_on' => __( 'On', 'she-header' ),
143
+ 'label_off' => __( 'Off', 'bew-header' ),
144
+ 'return_value' => 'yes',
145
+ 'default' => '',
146
+ 'frontend_available' => true,
147
+ 'condition' => [
148
+ 'transparent!' => '',
149
+ ],
150
+ 'description' => __( 'Choose background color after scrolling', 'she-header' ),
151
+ ]
152
+ );
153
 
154
  $element->add_control(
155
  'background',
156
  [
157
+ 'label' => __( 'Color', 'she-header' ),
158
+ 'type' => Controls_Manager::COLOR,
159
+ 'label_block' => 'true',
160
+ 'condition' => [
161
+ 'background_show' => 'yes',
162
+ 'transparent!' => '',
163
+ ],
164
+ 'render_type' => 'none',
165
+ 'frontend_available' => true,
166
+ ]
167
+ );
168
+
169
+ $element->add_control(
170
+ 'bottom_border',
171
+ [
172
+ 'label' => __( 'Bottom Border', 'she-header' ),
173
+ 'type' => Controls_Manager::SWITCHER,
174
+ 'separator' => 'before',
175
+ 'label_on' => __( 'On', 'she-header' ),
176
+ 'label_off' => __( 'Off', 'she-header' ),
177
+ 'return_value' => 'yes',
178
+ 'default' => '',
179
+ 'frontend_available' => true,
180
+ 'condition' => [
181
+ 'transparent!' => '',
182
+ ],
183
+ 'description' => __( 'Choose bottom border size and color', 'she-header' ),
184
+ ]
185
+ );
186
+
187
+
188
+ $element->add_control(
189
+ 'custom_bottom_border_color',
190
+ [
191
+ 'label' => __( 'Color', 'she-header' ),
192
  'type' => Controls_Manager::COLOR,
193
+ 'label_block' => 'true',
194
  'condition' => [
195
+ 'bottom_border' => 'yes',
196
+ 'transparent!' => '',
197
  ],
198
  'render_type' => 'none',
199
  'frontend_available' => true,
200
  ]
201
  );
202
+
203
+ $element->add_responsive_control(
204
+ 'custom_bottom_border_width',
205
+ [
206
+ 'label' => __( 'Width (px)', 'she-header' ),
207
+ 'type' => Controls_Manager::SLIDER,
208
+ 'default' => [
209
+ 'size' => 0,
210
+ ],
211
+ 'range' => [
212
+ 'px' => [
213
+ 'min' => 0,
214
+ 'max' => 100,
215
+ ],
216
+ ],
217
+ 'size_units' => [ 'px'],
218
+ 'condition' => [
219
+ 'bottom_border' => 'yes',
220
+ 'transparent!' => '',
221
+ ],
222
+ 'frontend_available' => true,
223
+ ]
224
+ );
225
 
226
  $element->add_control(
227
  'shrink_header',
228
  [
229
  'label' => __( 'Shrink', 'she-header' ),
230
  'type' => Controls_Manager::SWITCHER,
231
+ 'separator' => 'before',
232
  'label_on' => __( 'On', 'she-header' ),
233
  'label_off' => __( 'Off', 'she-header' ),
234
  'return_value' => 'yes',
235
  'default' => '',
236
  'frontend_available' => true,
237
+ 'description' => __( 'Choose header height after scrolling', 'she-header' ),
238
  'condition' => [
239
  'transparent!' => '',
240
  ],
256
  ],
257
  ],
258
  'size_units' => [ 'px'],
 
259
  'condition' => [
260
+ 'shrink_header' => 'yes',
261
  'transparent!' => '',
262
  ],
263
  'frontend_available' => true,
264
  ]
265
  );
266
 
267
+
268
  $element->end_controls_section();
269
  }
270
 
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) {
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
  };
406
  );
407
 
408
  }
409
+
410
  public function enqueue_scripts() {
411
  $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
412
 
420
  false
421
  );
422
  }
423
+
424
+
425
  }
readme.txt CHANGED
@@ -5,7 +5,7 @@ Tags: Elementor, Elementor Page Builder, Elements, Elementor Add-ons, Add-ons, P
5
  Requires at least: 4.5.9
6
  Tested up to: 4.9.4
7
  Requires PHP: 5.4
8
- Stable tag: 1.0.0
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
@@ -59,15 +59,6 @@ To get the best "shrink" effect use these settings:
59
 
60
  Basically what happens is that the content of the header is "too tall" to shrink down anymore.
61
 
62
- = Why can I see the page background when scrolling back up? =
63
- This is because the user reaches the top of the page before the animation is done. There are 2 ways to solve this.
64
- Method 1:
65
- * Open Elementor page settings by clicking the gear icon in the bottom left corner of the MAIN content page(Not the sticky header).
66
- * Click the style tab in the top right and change the background color to match either the top section background or the sticky header background.
67
- Method 2:
68
- *Open the sticky header in Elementor and click on "Edit Section"
69
- *Click the advanced tab and add NEGATIVE bottom margin that matches the height of the section. Ex: min height = 150px, bottom margin = -150px
70
-
71
  = Is this a standalone Plugin? =
72
 
73
  No. You cannot use Sticky Header Effects for Elementor by itself. It is a plugin for Elementor Pro.
@@ -86,8 +77,21 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
86
  2. Main settings panel.
87
  3. HEX, RGBA, and Color Name support.
88
 
89
- == Changelog ==
 
 
 
 
 
 
90
 
91
  = 1.0.0 =
92
 
93
- - Initial stable release
 
 
 
 
 
 
 
5
  Requires at least: 4.5.9
6
  Tested up to: 4.9.4
7
  Requires PHP: 5.4
8
+ Stable tag: 1.1.0
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
59
 
60
  Basically what happens is that the content of the header is "too tall" to shrink down anymore.
61
 
 
 
 
 
 
 
 
 
 
62
  = Is this a standalone Plugin? =
63
 
64
  No. You cannot use Sticky Header Effects for Elementor by itself. It is a plugin for Elementor Pro.
77
  2. Main settings panel.
78
  3. HEX, RGBA, and Color Name support.
79
 
80
+ == Changelog ==
81
+
82
+ = 1.1.0 =
83
+ *Added: Sticky header feature
84
+ *Added: Bottom border feature
85
+ *Fixed: Bugs with tablet and mobile responsive modes
86
+ *Fixed: Padding issues when using the "shrink" effect
87
 
88
  = 1.0.0 =
89
 
90
+ - Initial stable release
91
+
92
+ == Upgrade Notice ==
93
+
94
+ = 1.1.0 =
95
+ This version adds "Sticky Header" and "Bottom Border" options.
96
+ The sticky feature will bring the section down and overlay it on top of the page. This eliminates the need for negative margins which causes page scrolling problems.
97
+ The bottom border feature adds bottom border width and color options when user scrolls.
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.0.0
7
  * Author: Rwattner
8
  * Author URI: http://robertwattner.com
9
  * Requires at least: 4.9.0
@@ -19,7 +19,7 @@
19
 
20
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
 
22
- define( 'SHE_HEADER_VERSION', '1.0.0' );
23
  define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.0.0' );
24
 
25
  define( 'SHE_HEADER__FILE__', __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.1.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.1.0' );
23
  define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.0.0' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );