Sticky Menu (or Anything!) on Scroll - Version 2.1

Version Description

  • Sticky element has specific classes to target sticky/non-sticky state: ".element-is-sticky" and ".element-is-not-sticky"
Download this release

Release Info

Developer senff
Plugin Icon 128x128 Sticky Menu (or Anything!) on Scroll
Version 2.1
Comparing to
See all releases

Code changes from version 2.0.1 to 2.1

Files changed (10) hide show
  1. README.md +38 -4
  2. assets/faq.php +13 -5
  3. assets/js/jq-sticky-anything.js +6 -6
  4. assets/js/jq-sticky-anything.min.js +1 -1
  5. assets/js/stickThis.js +1 -1
  6. assets/js/sticky-anything-admin.js +1 -1
  7. assets/screenshot-1.png +0 -0
  8. assets/{screenshots/screenshot-3.png → screenshot-2.png} +0 -0
  9. readme.txt +35 -3
  10. sticky-menu-or-anything.php +5 -5
README.md CHANGED
@@ -4,8 +4,8 @@
4
  * Tags: sticky header, sticky menu, sticky, header, menu
5
  * Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
6
  * Requires at least: 3.6
7
- * Tested up to: 4.6
8
- * Stable tag: 2.0.1
9
  * License: GPLv2 or later
10
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
@@ -43,10 +43,38 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
43
  ## Frequently Asked Questions
44
 
45
  ### I selected a class/ID in the settings screen, but the element doesn't stick when I scroll down. Why not?
46
- First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it's preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you're using. If there is none, or more than one element that matches your selector, nothing will happen.
47
 
48
  ### Once the element becomes sticky, it's not positioned/sized properly at all.
49
- There are situations when this happens, especially when the original element has specific properties that are specifically used to manipulate its location and/or size. Things like negative margins, absolute positioning or left/top values on the original element can have undesired effects when the element becomes sticky. Another possible reason is if the original element has "!important" applied to some of its CSS properties. If possible, try to avoid that. Also, inline elements might not get the desired results. If that happens, try using the plugin in Legacy Mode (see below).
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
 
51
  ### Once the element becomes sticky, there's a brief moment where you see it twice.
52
  If you're using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.
@@ -106,6 +134,9 @@ If the customization is fairly minor, I can probably help out right away. Howeve
106
 
107
  ## Changelog
108
 
 
 
 
109
  ### 2.0.1
110
  * fixed padding calculation bug (percentages are off when sticky)
111
  * fixed bug where assigned styles loop caused JS error
@@ -164,6 +195,9 @@ If the customization is fairly minor, I can probably help out right away. Howeve
164
 
165
  ## Upgrade Notice
166
 
 
 
 
167
  ## 2.0.1
168
  * A few small bug fixes
169
 
4
  * Tags: sticky header, sticky menu, sticky, header, menu
5
  * Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
6
  * Requires at least: 3.6
7
+ * Tested up to: 4.9
8
+ * Stable tag: 2.1
9
  * License: GPLv2 or later
10
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
43
  ## Frequently Asked Questions
44
 
45
  ### I selected a class/ID in the settings screen, but the element doesn't stick when I scroll down. Why not?
46
+ First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. `.main-menu`), and if you select it by its ID, that it's preceded by a pound/hash/number sign (e.g. `#main-menu`). Also, make sure there is only ONE element on the page with the selector you're using. If there is none, or more than one element that matches your selector, nothing will happen.
47
 
48
  ### Once the element becomes sticky, it's not positioned/sized properly at all.
49
+ Due to the nature of CSS, there are situations where an element will not stick properly, usually if it has specific properties that are used to manipulate its location and/or dimensions. If your sticky element has any of the following properties, this could cause conflicts:
50
+
51
+ - negative margins
52
+ - absolute positioning
53
+ - top/left/bottom/right properties
54
+ - `display: inline`
55
+ - `!important` applied to any of its properties
56
+
57
+ Try to avoid all this where possible, but if you can't, using the plugin in Legacy Mode (see below) helps sometimes.
58
+ Another situation that can cause trouble, is when any parent of your sticky element has the `transform` CSS property applied to it.
59
+
60
+ ### Once the element becomes sticky, it's not responsive and doesn't resize when I change the browser size.
61
+ This is a known (and annoying) bug in the plugin that I haven't been able to solve properly yet. For some sites (when the element does not contain any Javascript interactivity, usually), it sometimes helps to use the plugin in Legacy Mode (see below).
62
+
63
+ ### Is it possible to add some styles to the element but only when it's sticky?
64
+ To add styles to your sticky element when it's not sticky, use classname `.element-is-not-sticky`.
65
+ To add styles to your sticky element only when it's sticky, use classname `.element-is-sticky`.
66
+
67
+ The following code would give your element a red background when it's not sticky, and blue when it is:
68
+
69
+ ```
70
+ .element-is-not-sticky {
71
+ background: red;
72
+ }
73
+
74
+ .element-is-sticky {
75
+ background: blue;
76
+ }
77
+ ```
78
 
79
  ### Once the element becomes sticky, there's a brief moment where you see it twice.
80
  If you're using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.
134
 
135
  ## Changelog
136
 
137
+ ### 2.1
138
+ * Sticky element has specific classes to target sticky/non-sticky state: ".element-is-sticky" and ".element-is-not-sticky"
139
+
140
  ### 2.0.1
141
  * fixed padding calculation bug (percentages are off when sticky)
142
  * fixed bug where assigned styles loop caused JS error
195
 
196
  ## Upgrade Notice
197
 
198
+ ## 2.1
199
+ * Functionality for targeting sticky/non-sticky classnames added
200
+
201
  ## 2.0.1
202
  * A few small bug fixes
203
 
assets/faq.php CHANGED
@@ -4,7 +4,15 @@
4
  <?php _e('First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it\'s preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you\'re using. If there is none, or more than one element that matches your selector, nothing will happen.','Sticky Anything plugin'); ?></p>
5
 
6
  <p><strong><?php _e('Q: Once the element becomes sticky, it\'s not positioned/sized properly at all.','Sticky Anything plugin'); ?></strong><br />
7
- <?php _e('There are situations when this happens, especially when the original element has specific properties that are specifically used to manipulate its location and/or size. Things like negative margins, absolute positioning or left/top values on the original element can have undesired effects when the element becomes sticky. Another possible reason is if the original element has "!important" applied to some of its CSS properties. If possible, try to avoid all that. Also, inline elements might not get the desired results. If that happens, try using the plugin in Legacy Mode (see below).','Sticky Anything plugin'); ?></p>
 
 
 
 
 
 
 
 
8
 
9
  <p><strong><?php _e('Q: Once the element becomes sticky, there\'s a brief moment where you see it twice.','Sticky Anything plugin'); ?></strong><br />
10
  <?php _e('If you\'re using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.','Sticky Anything plugin'); ?></p>
@@ -22,10 +30,10 @@
22
  <?php _e('The current version only allows one sticky element, but this functionality will be implemented in the next major version. No expected release date, though.','Sticky Anything plugin'); ?></p>
23
 
24
  <p><strong><?php _e('Q: What is Legacy Mode? Should I use it?','Sticky Anything plugin'); ?></strong><br />
25
- <?php _e('In version 2.0 of the plugin, a new/better method for making elements sticky was introduced. Before this, a sticky element would essentially be a cloned copy of the original element. Now, the element itself becomes sticky and doesn\'t use copying and cloning anymore, which solves a lot of issues.'); ?></p>
26
- <p><?php _e('So, should you use it or not? Well, if you <em>upgraded</em> this plugin from an earlier version, Legacy Mode will be turned ON by default, because chances are that the old method worked perfectly fine for your site. If that\'s the case, there is not really a need to use the new method and you can just continue using the old, classic method. If it ain\'t broke, don\'t fix it, right?'); ?></p>
27
- <p><?php _e('Having said that, it\'s worth checking if your element works just as well with Legacy Mode turned OFF, since this is the "better" method. Just give it a quick try. If it doesn\'t work, you can always just go back and enable it again.'); ?></p>
28
- <p><?php _e('<span style="font-weight:bold;">NOTE: new installs of the plugin will have the Legacy Mode turned off by default. Only UPGRADES from 1.4 (or before) should have it turned on by default.</span>'); ?>
29
 
30
  <p><strong><?php _e('Q: What is this Dynamic Mode thing exactly?','Sticky Anything plugin'); ?></strong><br />
31
  <?php _e('This mode is only available in Legacy Mode, and to properly explain this, we\'ll need to go a little deeper in the plugin\'s functionality. So bear with me...','Sticky Anything plugin'); ?></p>
4
  <?php _e('First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it\'s preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you\'re using. If there is none, or more than one element that matches your selector, nothing will happen.','Sticky Anything plugin'); ?></p>
5
 
6
  <p><strong><?php _e('Q: Once the element becomes sticky, it\'s not positioned/sized properly at all.','Sticky Anything plugin'); ?></strong><br />
7
+ <?php _e('Due to the nature of CSS, there are situations where an element will not stick properly, usually if it has specific properties that are used to manipulate its location and/or dimensions. If your sticky element has any of the following properties, this could cause conflicts:</p><ul><li>- negative margins</li><li>- absolute positioning</li><li>- top/left/bottom/right properties</li><li>- "display: inline"</li><li>- "!important" applied to any of its properties</li></ul><p>Try to avoid all this where possible, but if you can\'t, using the plugin in Legacy Mode (see below) helps sometimes.<br>Another situation that can cause trouble, is when any parent of your sticky element has the "transform" CSS property applied to it.','Sticky Anything plugin'); ?></p>
8
+
9
+ <p><strong><?php _e('Q: Once the element becomes sticky, it\'s not responsive and doesn\'t resize when I change the browser size.','Sticky Anything plugin'); ?></strong><br />
10
+ <?php _e('This is a known (and annoying) bug in the plugin that I haven\'t been able to solve properly yet. For some sites (when the element does not contain any Javascript interactivity, usually), it sometimes helps to use the plugin in Legacy Mode (see below).','Sticky Anything plugin'); ?></p>
11
+
12
+ <p><strong><?php _e('Q: Is it possible to add some styles to the element but <em>only</em> when it\'s sticky?','Sticky Anything plugin'); ?></strong><br />
13
+ <?php _e('To add styles to your sticky element when it\'s <em>not sticky</em>, use classname ".element-is-not-sticky".<br>To add styles to your sticky element <em>only</em> when it\'s sticky, use classname ".element-is-sticky".','Sticky Anything plugin'); ?></p>
14
+ <p><?php _e('The following code would give your element a red background only when it\'s not sticky, and blue only when it is:','Sticky Anything plugin'); ?></p>
15
+ <p><?php _e('<code>.element-is-not-sticky {<br>&nbsp;&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;&nbsp;}<br><br>.element-is-sticky {<br>&nbsp;&nbsp;&nbsp;background: blue;<br>&nbsp;&nbsp;&nbsp;}</code>','Sticky Anything plugin'); ?></p>
16
 
17
  <p><strong><?php _e('Q: Once the element becomes sticky, there\'s a brief moment where you see it twice.','Sticky Anything plugin'); ?></strong><br />
18
  <?php _e('If you\'re using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.','Sticky Anything plugin'); ?></p>
30
  <?php _e('The current version only allows one sticky element, but this functionality will be implemented in the next major version. No expected release date, though.','Sticky Anything plugin'); ?></p>
31
 
32
  <p><strong><?php _e('Q: What is Legacy Mode? Should I use it?','Sticky Anything plugin'); ?></strong><br />
33
+ <?php _e('In version 2.0 of the plugin, a new/better method for making elements sticky was introduced. Before this, a sticky element would essentially be a cloned copy of the original element. Now, the element itself becomes sticky and doesn\'t use copying and cloning anymore, which solves a lot of issues.','Sticky Anything plugin'); ?></p>
34
+ <p><?php _e('So, should you use it or not? Well, if you <em>upgraded</em> this plugin from an earlier version, Legacy Mode will be turned ON by default, because chances are that the old method worked perfectly fine for your site. If that\'s the case, there is not really a need to use the new method and you can just continue using the old, classic method. If it ain\'t broke, don\'t fix it, right?','Sticky Anything plugin'); ?></p>
35
+ <p><?php _e('Having said that, it\'s worth checking if your element works just as well with Legacy Mode turned OFF, since this is the "better" method. Just give it a quick try. If it doesn\'t work, you can always just go back and enable it again.','Sticky Anything plugin'); ?></p>
36
+ <p><?php _e('<span style="font-weight:bold;">NOTE: new installs of the plugin will have the Legacy Mode turned off by default. Only UPGRADES from 1.4 (or before) should have it turned on by default.</span>','Sticky Anything plugin'); ?></p>
37
 
38
  <p><strong><?php _e('Q: What is this Dynamic Mode thing exactly?','Sticky Anything plugin'); ?></strong><br />
39
  <?php _e('This mode is only available in Legacy Mode, and to properly explain this, we\'ll need to go a little deeper in the plugin\'s functionality. So bear with me...','Sticky Anything plugin'); ?></p>
assets/js/jq-sticky-anything.js CHANGED
@@ -1,5 +1,5 @@
1
  /**
2
- * @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  console.error('PLEASE NOTE: this is just a notification that the Sticky Menu (or Anything!) plugin is now working in Debug Mode.');
@@ -62,7 +62,7 @@ console.error('Even though this mode will not impact any functionality, do NOT u
62
  if(settings.legacymode == true) {
63
 
64
  // LEGACY MODE
65
- $(this).addClass('sticky-element-original');
66
  if(settings.dynamicmode != true) {
67
  // Create a clone of the menu, right next to original (in the DOM) on initial page load
68
  createClone(settings.top,settings.zindex,settings.adminbar);
@@ -72,7 +72,7 @@ console.error('Even though this mode will not impact any functionality, do NOT u
72
  } else {
73
 
74
  // MODERN MODE
75
- $(this).addClass('sticky-element-original');
76
  orgAssignedStyles = cssStyles($(this)); // All original element styles, assigned by CSS.
77
  orgInlineStyles = $('.sticky-element-original').attr('style');
78
  if (orgInlineStyles == null) {
@@ -195,14 +195,14 @@ console.error('Even though this mode will not impact any functionality, do NOT u
195
 
196
  assignedStyles += 'width:'+widthPlaceholder+'px; height:'+heightPlaceholder+'px; margin:'+marginPlaceholder+';';
197
 
198
- $('.sticky-element-original').removeClass('sticky-element-active').css('position','fixed').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthSticky).css('margin-left',0).css('padding',paddingSticky).css('margin-top',stickyTopMargin).css('z-index',stickyZindex);
199
  if(!$('.sticky-element-placeholder').hasClass('sticky-element-active')) {
200
  $('.sticky-element-placeholder').addClass('sticky-element-active').attr('style',assignedStyles);
201
  }
202
 
203
  } else {
204
  // not scrolled past the menu; only show the original element.
205
- $('.sticky-element-original').addClass('sticky-element-active').attr('style',originalInlineStyles);
206
  if($('.sticky-element-placeholder').hasClass('sticky-element-active')) {
207
  $('.sticky-element-placeholder').removeClass('sticky-element-active').removeAttr('style').css('width','0').css('height','0').css('margin','0').css('padding','0');
208
  }
@@ -313,7 +313,7 @@ console.error('Even though this mode will not impact any functionality, do NOT u
313
  }
314
 
315
  function createClone(cloneTop,cloneZindex) {
316
- $('.sticky-element-original').clone().insertAfter($('.sticky-element-original')).addClass('sticky-element-cloned').css('position','fixed').css('top',cloneTop+'px').css('margin-left','0').css('z-index',cloneZindex).removeClass('sticky-element-original').hide();
317
  }
318
 
319
  }(jQuery));
1
  /**
2
+ * @preserve Sticky Anything 2.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  console.error('PLEASE NOTE: this is just a notification that the Sticky Menu (or Anything!) plugin is now working in Debug Mode.');
62
  if(settings.legacymode == true) {
63
 
64
  // LEGACY MODE
65
+ $(this).addClass('sticky-element-original').addClass('element-is-not-sticky');
66
  if(settings.dynamicmode != true) {
67
  // Create a clone of the menu, right next to original (in the DOM) on initial page load
68
  createClone(settings.top,settings.zindex,settings.adminbar);
72
  } else {
73
 
74
  // MODERN MODE
75
+ $(this).addClass('sticky-element-original').addClass('element-is-not-sticky');
76
  orgAssignedStyles = cssStyles($(this)); // All original element styles, assigned by CSS.
77
  orgInlineStyles = $('.sticky-element-original').attr('style');
78
  if (orgInlineStyles == null) {
195
 
196
  assignedStyles += 'width:'+widthPlaceholder+'px; height:'+heightPlaceholder+'px; margin:'+marginPlaceholder+';';
197
 
198
+ $('.sticky-element-original').removeClass('sticky-element-active').removeClass('element-is-not-sticky').addClass('element-is-sticky').css('position','fixed').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthSticky).css('margin-left',0).css('padding',paddingSticky).css('margin-top',stickyTopMargin).css('z-index',stickyZindex);
199
  if(!$('.sticky-element-placeholder').hasClass('sticky-element-active')) {
200
  $('.sticky-element-placeholder').addClass('sticky-element-active').attr('style',assignedStyles);
201
  }
202
 
203
  } else {
204
  // not scrolled past the menu; only show the original element.
205
+ $('.sticky-element-original').addClass('sticky-element-active').removeClass('element-is-sticky').addClass('element-is-not-sticky').attr('style',originalInlineStyles);
206
  if($('.sticky-element-placeholder').hasClass('sticky-element-active')) {
207
  $('.sticky-element-placeholder').removeClass('sticky-element-active').removeAttr('style').css('width','0').css('height','0').css('margin','0').css('padding','0');
208
  }
313
  }
314
 
315
  function createClone(cloneTop,cloneZindex) {
316
+ $('.sticky-element-original').clone().insertAfter($('.sticky-element-original')).addClass('sticky-element-cloned').removeClass('element-is-not-sticky').addClass('element-is-sticky').css('position','fixed').css('top',cloneTop+'px').css('margin-left','0').css('z-index',cloneZindex).removeClass('sticky-element-original').hide();
317
  }
318
 
319
  }(jQuery));
assets/js/jq-sticky-anything.min.js CHANGED
@@ -1,5 +1,5 @@
1
  /**
2
- * @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  var stickyAnythingBreakpoint = '' // solely to use as a debugging breakpoint, if needed.
1
  /**
2
+ * @preserve Sticky Anything 2.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  var stickyAnythingBreakpoint = '' // solely to use as a debugging breakpoint, if needed.
assets/js/stickThis.js CHANGED
@@ -1,5 +1,5 @@
1
  /**
2
- * @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  (function($) {
1
  /**
2
+ * @preserve Sticky Anything 2.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  (function($) {
assets/js/sticky-anything-admin.js CHANGED
@@ -1,5 +1,5 @@
1
  /**
2
- * @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  jQuery(function($) {
1
  /**
2
+ * @preserve Sticky Anything 2.1 | @senff | GPL2 Licensed
3
  */
4
 
5
  jQuery(function($) {
assets/screenshot-1.png ADDED
Binary file
assets/{screenshots/screenshot-3.png → screenshot-2.png} RENAMED
File without changes
readme.txt CHANGED
@@ -4,8 +4,8 @@ Donate link: http://www.senff.com/donate
4
  Tags: sticky header, sticky menu, sticky, header, menu
5
  Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
6
  Requires at least: 3.6
7
- Tested up to: 4.6
8
- Stable tag: 2.0.1
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
@@ -47,7 +47,33 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
47
  First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it's preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you're using. If there is none, or more than one element that matches your selector, nothing will happen.
48
 
49
  = Once the element becomes sticky, it's not positioned/sized properly at all. =
50
- There are situations when this happens, especially when the original element has specific properties that are specifically used to manipulate its location and/or size. Things like negative margins, absolute positioning or left/top values on the original element can have undesired effects when the element becomes sticky. Another possible reason is if the original element has "!important" applied to some of its CSS properties. If possible, try to avoid that. Also, inline elements might not get the desired results. If that happens, try using the plugin in Legacy Mode (see below).
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
 
52
  = Once the element becomes sticky, there's a brief moment where you see it twice. =
53
  If you're using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.
@@ -107,6 +133,9 @@ If the customization is fairly minor, I can probably help out right away. Howeve
107
 
108
  == Changelog ==
109
 
 
 
 
110
  = 2.0.1 =
111
  * fixed padding calculation bug (percentages are off when sticky)
112
  * fixed bug where assigned styles loop caused JS error
@@ -165,6 +194,9 @@ If the customization is fairly minor, I can probably help out right away. Howeve
165
 
166
  == Upgrade Notice ==
167
 
 
 
 
168
  = 2.0.1 =
169
  * A few small bug fixes
170
 
4
  Tags: sticky header, sticky menu, sticky, header, menu
5
  Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
6
  Requires at least: 3.6
7
+ Tested up to: 4.9
8
+ Stable tag: 2.1
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
47
  First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it's preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you're using. If there is none, or more than one element that matches your selector, nothing will happen.
48
 
49
  = Once the element becomes sticky, it's not positioned/sized properly at all. =
50
+ Due to the nature of CSS, there are situations where an element will not stick properly, usually if it has specific properties that are used to manipulate its location and/or dimensions. If your sticky element has any of the following properties, this could cause conflicts:
51
+
52
+ - negative margins
53
+ - absolute positioning
54
+ - top/left/bottom/right properties
55
+ - "display: inline"
56
+ - "!important" applied to any of its properties
57
+
58
+ Try to avoid all this where possible, but if you can't, using the plugin in Legacy Mode (see below) helps sometimes.
59
+ Another situation that can cause trouble, is when any parent of your sticky element has the "transform" CSS property applied to it.
60
+
61
+ = Once the element becomes sticky, it's not responsive and doesn't resize when I change the browser size.
62
+ This is a known (and annoying) bug in the plugin that I haven't been able to solve properly yet. For some sites (when the element does not contain any Javascript interactivity, usually), it sometimes helps to use the plugin in Legacy Mode (see below).
63
+
64
+ = Is it possible to add some styles to the element but only when it's sticky?
65
+ To add styles to your sticky element when it's not sticky, use classname ".element-is-not-sticky".
66
+ To add styles to your sticky element only when it's sticky, use classname ".element-is-sticky"
67
+
68
+ The following code would give your element a red background only when it's not sticky, and blue only when it is:
69
+
70
+ .element-is-not-sticky {
71
+ background: red;
72
+ }
73
+
74
+ .element-is-sticky {
75
+ background: blue;
76
+ }
77
 
78
  = Once the element becomes sticky, there's a brief moment where you see it twice. =
79
  If you're using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.
133
 
134
  == Changelog ==
135
 
136
+ = 2.1 =
137
+ * Sticky element has specific classes to target sticky/non-sticky state: ".element-is-sticky" and ".element-is-not-sticky"
138
+
139
  = 2.0.1 =
140
  * fixed padding calculation bug (percentages are off when sticky)
141
  * fixed bug where assigned styles loop caused JS error
194
 
195
  == Upgrade Notice ==
196
 
197
+ = 2.1 =
198
+ * Functionality for targeting sticky/non-sticky classnames added
199
+
200
  = 2.0.1 =
201
  * A few small bug fixes
202
 
sticky-menu-or-anything.php CHANGED
@@ -5,7 +5,7 @@ Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
5
  Description: Pick any element on your page, and it will stick when it reaches the top of the page when you scroll down. Usually handy for navigation menus, but can be used for any (unique) element on your page.
6
  Author: Mark Senff
7
  Author URI: http://www.senff.com
8
- Version: 2.0.1
9
  */
10
 
11
  defined('ABSPATH') or die('INSERT COIN');
@@ -21,7 +21,7 @@ defined('ABSPATH') or die('INSERT COIN');
21
  */
22
  if (!function_exists('sticky_anthing_default_options')) {
23
  function sticky_anthing_default_options() {
24
- $versionNum = '2.0.1';
25
  if (get_option('sticky_anything_options') === false) {
26
  $new_options['sa_version'] = $versionNum;
27
  $new_options['sa_element'] = '';
@@ -46,7 +46,7 @@ if (!function_exists('sticky_anthing_default_options')) {
46
  */
47
  if (!function_exists('sticky_anything_update')) {
48
  function sticky_anything_update() {
49
- $versionNum = '2.0.1';
50
  $existing_options = get_option('sticky_anything_options');
51
 
52
  if(!isset($existing_options['sa_minscreenwidth'])) {
@@ -346,7 +346,7 @@ if (!function_exists('sticky_anything_config_page')) {
346
  </tr>
347
 
348
  <tr>
349
- <th scope="row"><span class="new"><?php _e('NEW!','Sticky Anything plugin'); ?></span> <?php _e('Legacy mode:','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('If you upgraded from an earlier version and it always worked before, use legacy mode to keep using the old method.','Sticky Anything plugin'); ?>" class="help">?</a></th>
350
  <td>
351
  <input type="checkbox" id="sa_legacymode" name="sa_legacymode" <?php if ($sticky_anything_options['sa_legacymode'] == true ) echo ' checked="checked" ';?> />
352
  <label for="sa_legacymode"><strong><?php _e('Legacy Mode (only recommended if you upgraded from earlier version).','Sticky Anything plugin'); ?></strong></label>
@@ -521,7 +521,7 @@ if (!function_exists('sticky_anything_styles')) {
521
  return;
522
  }
523
 
524
- wp_register_script('stickyAnythingAdminScript', plugins_url('/assets/js/sticky-anything-admin.js', __FILE__), array( 'jquery' ), '2.0.1');
525
  wp_enqueue_script('stickyAnythingAdminScript');
526
 
527
  wp_register_style('stickyAnythingAdminStyle', plugins_url('/assets/css/sticky-anything-admin.css', __FILE__) );
5
  Description: Pick any element on your page, and it will stick when it reaches the top of the page when you scroll down. Usually handy for navigation menus, but can be used for any (unique) element on your page.
6
  Author: Mark Senff
7
  Author URI: http://www.senff.com
8
+ Version: 2.1
9
  */
10
 
11
  defined('ABSPATH') or die('INSERT COIN');
21
  */
22
  if (!function_exists('sticky_anthing_default_options')) {
23
  function sticky_anthing_default_options() {
24
+ $versionNum = '2.1';
25
  if (get_option('sticky_anything_options') === false) {
26
  $new_options['sa_version'] = $versionNum;
27
  $new_options['sa_element'] = '';
46
  */
47
  if (!function_exists('sticky_anything_update')) {
48
  function sticky_anything_update() {
49
+ $versionNum = '2.1';
50
  $existing_options = get_option('sticky_anything_options');
51
 
52
  if(!isset($existing_options['sa_minscreenwidth'])) {
346
  </tr>
347
 
348
  <tr>
349
+ <th scope="row"><!-- <span class="new"><?php _e('NEW!','Sticky Anything plugin'); ?></span>--> <?php _e('Legacy mode:','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('If you upgraded from an earlier version and it always worked before, use legacy mode to keep using the old method.','Sticky Anything plugin'); ?>" class="help">?</a></th>
350
  <td>
351
  <input type="checkbox" id="sa_legacymode" name="sa_legacymode" <?php if ($sticky_anything_options['sa_legacymode'] == true ) echo ' checked="checked" ';?> />
352
  <label for="sa_legacymode"><strong><?php _e('Legacy Mode (only recommended if you upgraded from earlier version).','Sticky Anything plugin'); ?></strong></label>
521
  return;
522
  }
523
 
524
+ wp_register_script('stickyAnythingAdminScript', plugins_url('/assets/js/sticky-anything-admin.js', __FILE__), array( 'jquery' ), '2.1');
525
  wp_enqueue_script('stickyAnythingAdminScript');
526
 
527
  wp_register_style('stickyAnythingAdminStyle', plugins_url('/assets/css/sticky-anything-admin.css', __FILE__) );