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

Version Description

  • Dynamic Mode added (addressing problems with dynamically created menus -- see Frequently Asked Questions above for details).
Download this release

Release Info

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

Code changes from version 1.1.4 to 1.2

Files changed (6) hide show
  1. README.md +29 -3
  2. assets/js/jq-sticky-anything.js +51 -34
  3. assets/js/jq-sticky-anything.min.js +5 -1
  4. assets/js/stickThis.js +5 -1
  5. readme.txt +30 -4
  6. sticky-menu-or-anything.php +31 -7
README.md CHANGED
@@ -4,7 +4,7 @@
4
  * Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
5
  * Requires at least: 3.6
6
  * Tested up to: 4.1
7
- * Stable tag: 1.1.4
8
  * License: GPLv2 or later
9
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -24,6 +24,7 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
24
  * **Positioning from top**: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the "ceiling" of the page.
25
  * **Enable for certain screen sizes only**: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don't want your element to be sticky on smaller screens, for example.
26
  * **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
 
27
  * **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
28
 
29
 
@@ -41,8 +42,10 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
41
  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.
42
 
43
  ### I'm having some issues on mobile (or other responsive themes).
44
- Some themes use some JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn't exist in the HTML source code upon page load, but is created on the fly some time after the page is fully loaded. Since the Sticky Anything plugin only works with elements that are present in the HTML source code, this can cause issues.
45
- There is an experimental version of the plugin that addresses this issue, but it is not public since most themes do not use this method (and other plugins may rely on having the sticky menu present before they load). If you are interested in trying this version, please get in touch with me through http://www.senff.com/ and I will be happy to provide you this version, along with some help.
 
 
46
 
47
  ### Still doesn't work. What could be wrong?
48
  Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that returns zero elements on the page, OR more than one, it will be shown.
@@ -50,6 +53,23 @@ Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and yo
50
  ### Is it possible to have multiple sticky elements?
51
  The current version only allows one sticky element. Having more than one may clutter up your page and confuse the user (imagine having a menu stuck at the top, and a banner stuck on the left, and another thing on the right, etc.). Having said that, this functionality may be added to a future version.
52
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  ### I'll need more help please!
54
  The plugin's own page can be found [here](http://www.senff.com/plugins/sticky-anything-wp).
55
 
@@ -63,6 +83,9 @@ For any other issues, please use the [WordPress.org forum](https://wordpress.org
63
 
64
  ## Changelog
65
 
 
 
 
66
  ### 1.1.4
67
  * Ready for WordPress 4.1 (and TwentyFifteen).
68
  * Fixes issue when element has padding in percentages.
@@ -85,6 +108,9 @@ For any other issues, please use the [WordPress.org forum](https://wordpress.org
85
 
86
  ## Upgrade Notice
87
 
 
 
 
88
  ### 1.1.4
89
  * Ready for WordPress 4.1 (and TwentyFifteen).
90
  * Fixes issue when element has padding in percentages.
4
  * Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
5
  * Requires at least: 3.6
6
  * Tested up to: 4.1
7
+ * Stable tag: 1.2
8
  * License: GPLv2 or later
9
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
24
  * **Positioning from top**: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the "ceiling" of the page.
25
  * **Enable for certain screen sizes only**: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don't want your element to be sticky on smaller screens, for example.
26
  * **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
27
+ * **Dynamic Mode**: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode. See below for details.
28
  * **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
29
 
30
 
42
  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.
43
 
44
  ### I'm having some issues on mobile (or other responsive themes).
45
+ A number of people reported problems using a sticky element in a responsive theme - mostly situations involving a different menu (in both design and functionality) between desktop, tablet and mobile views. The newly-introduced 'Dynamic Mode' solves some of these problems. Try it yourself and chances are that works for you as well (though it's not a setting that will magically solves any and all problems that may occur).
46
+
47
+ ### My menu sticks, but it doesn't open on the Responsive Theme when it's sticky.
48
+ This is a known bug. I'm looking into it.
49
 
50
  ### Still doesn't work. What could be wrong?
51
  Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that returns zero elements on the page, OR more than one, it will be shown.
53
  ### Is it possible to have multiple sticky elements?
54
  The current version only allows one sticky element. Having more than one may clutter up your page and confuse the user (imagine having a menu stuck at the top, and a banner stuck on the left, and another thing on the right, etc.). Having said that, this functionality may be added to a future version.
55
 
56
+ ### What is this Dynamic Mode thing exactly?
57
+ To properly explain this, we'll need to go a little deeper in the plugin's functionality. So bear with me...
58
+
59
+ When an element becomes sticky at the top of the page (and keeps its place regardless of the scrolling), it's actually not the element itself you see, but a cloned copy of it (the original element is out of view and invisible).
60
+
61
+ The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.
62
+
63
+ In the original plugin version, the clone would be created right when you load the page. Then when you would scroll down, it would become visible (and stick at the top) while the original element would disappear.
64
+
65
+ However, some themes use some JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn't exist in the HTML source code when you load the page, but is created on the fly some time after the page is fully loaded -- in many cases, these menus would just be generated ONLY when the screen is more (or less) than a certain specific width. With the original version of the plugin, the problem would be that the original element may not have been fully created upon page load, so the clone would also not be fully functional.
66
+
67
+ In Dynamic Mode, a clone of the element is not created on page load -- instead, it's created when the user scrolls and hits the "sticky" point. This ensures that the cloned element is an actual 1-on-1 copy of what the original element consists of at that specific point (and not at the "page is loaded" point, which may be different if the element was altered since).
68
+
69
+ Why don't we use Dynamic Mode all the time then? This has to do with the fact that other plugins initialize themselves on page load and may need the full markup (including the cloned element) at that point. In Dynamic Mode, there is no clone available yet on page load, so that could cause an issue.
70
+
71
+ Phew!
72
+
73
  ### I'll need more help please!
74
  The plugin's own page can be found [here](http://www.senff.com/plugins/sticky-anything-wp).
75
 
83
 
84
  ## Changelog
85
 
86
+ ### 1.2
87
+ * Dynamic Mode added (addressing problems with dynamically created menus -- see Frequently Asked Questions above for details).
88
+
89
  ### 1.1.4
90
  * Ready for WordPress 4.1 (and TwentyFifteen).
91
  * Fixes issue when element has padding in percentages.
108
 
109
  ## Upgrade Notice
110
 
111
+ ### 1.2
112
+ * Dynamic Mode added (addressing problems with dynamically created menus -- see Frequently Asked Questions above for details).
113
+
114
  ### 1.1.4
115
  * Ready for WordPress 4.1 (and TwentyFifteen).
116
  * Fixes issue when element has padding in percentages.
assets/js/jq-sticky-anything.js CHANGED
@@ -1,5 +1,5 @@
1
  /**
2
- * @preserve Sticky Anything 1.1.3 | @senff | GPL2 Licensed
3
  */
4
 
5
  (function ($) {
@@ -12,6 +12,7 @@
12
  minscreenwidth: 0,
13
  maxscreenwidth: 99999,
14
  zindex: 1,
 
15
  debugmode: false
16
  }, options );
17
 
@@ -31,48 +32,64 @@
31
  console.error('STICKY ANYTHING DEBUG: There is more than one element with the selector/class/ID you selected. You can only make ONE element sticky.');
32
  }
33
  } else {
34
- // Create a clone of the menu, right next to original (in the DOM).
35
- $(this).addClass('original').clone().insertAfter(this).addClass('cloned').css('position','fixed').css('top',settings.top+'px').css('margin-top','0').css('margin-left','0').css('z-index',settings.zindex).removeClass('original').hide();
36
- checkElement = setInterval(function(){stickIt(settings.top,settings.minscreenwidth,settings.maxscreenwidth)},10);
 
 
 
37
  }
38
 
39
  return this;
40
  };
41
 
42
 
43
- function stickIt(stickyTop,minwidth,maxwidth) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
 
45
- var orgElementPos = $('.original').offset();
46
- orgElementTop = orgElementPos.top;
 
 
 
 
 
 
47
 
48
- // Calculating actual viewport width
49
- var e = window, a = 'inner';
50
- if (!('innerWidth' in window )) {
51
- a = 'client';
52
- e = document.documentElement || document.body;
 
 
 
 
 
 
 
 
 
 
 
53
  }
54
- viewport = e[ a+'Width' ];
55
-
56
- if (($(window).scrollTop() >= (orgElementTop - stickyTop)) && (viewport >= minwidth) && (viewport <= maxwidth)) {
57
-
58
- // scrolled past the original position; now only show the cloned, sticky element.
59
-
60
- // Cloned element should always have same left position and width as original element.
61
- orgElement = $('.original');
62
- coordsOrgElement = orgElement.offset();
63
- leftOrgElement = coordsOrgElement.left;
64
- widthOrgElement = orgElement.css('width');
65
- // If padding is percentages, convert to pixels
66
- paddingOrgElement = [orgElement.css('padding-top'), orgElement.css('padding-right'), orgElement.css('padding-bottom'), orgElement.css('padding-left')];
67
- paddingCloned = paddingOrgElement[0] + ' ' + paddingOrgElement[1] + ' ' + paddingOrgElement[2] + ' ' + paddingOrgElement[3];
68
-
69
- $('.cloned').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthOrgElement).css('padding',paddingCloned).show();
70
- $('.original').css('visibility','hidden');
71
- } else {
72
- // not scrolled past the menu; only show the original menu.
73
- $('.cloned').hide();
74
- $('.original').css('visibility','visible');
75
  }
76
- }
77
 
78
  }(jQuery));
1
  /**
2
+ * @preserve Sticky Anything 1.2 | @senff | GPL2 Licensed
3
  */
4
 
5
  (function ($) {
12
  minscreenwidth: 0,
13
  maxscreenwidth: 99999,
14
  zindex: 1,
15
+ dynamicmode: false,
16
  debugmode: false
17
  }, options );
18
 
32
  console.error('STICKY ANYTHING DEBUG: There is more than one element with the selector/class/ID you selected. You can only make ONE element sticky.');
33
  }
34
  } else {
35
+ $(this).addClass('original');
36
+ if(settings.dynamicmode != true) {
37
+ // Create a clone of the menu, right next to original (in the DOM) on initial page load
38
+ createClone(settings.top,settings.zindex);
39
+ }
40
+ checkElement = setInterval(function(){stickIt(settings.top,settings.minscreenwidth,settings.maxscreenwidth,settings.zindex,settings.dynamicmode)},10);
41
  }
42
 
43
  return this;
44
  };
45
 
46
 
47
+ function stickIt(stickyTop,minwidth,maxwidth,stickyZindex,dynamic) {
48
+
49
+ var orgElementPos = $('.original').offset();
50
+ orgElementTop = orgElementPos.top;
51
+
52
+ // Calculating actual viewport width
53
+ var e = window, a = 'inner';
54
+ if (!('innerWidth' in window )) {
55
+ a = 'client';
56
+ e = document.documentElement || document.body;
57
+ }
58
+ viewport = e[ a+'Width' ];
59
+
60
+ if (($(window).scrollTop() >= (orgElementTop - stickyTop)) && (viewport >= minwidth) && (viewport <= maxwidth)) {
61
+
62
+ // scrolled past the original position; now only show the cloned, sticky element.
63
 
64
+ // Cloned element should always have same left position and width as original element.
65
+ orgElement = $('.original');
66
+ coordsOrgElement = orgElement.offset();
67
+ leftOrgElement = coordsOrgElement.left;
68
+ widthOrgElement = orgElement.css('width');
69
+ // If padding is percentages, convert to pixels
70
+ paddingOrgElement = [orgElement.css('padding-top'), orgElement.css('padding-right'), orgElement.css('padding-bottom'), orgElement.css('padding-left')];
71
+ paddingCloned = paddingOrgElement[0] + ' ' + paddingOrgElement[1] + ' ' + paddingOrgElement[2] + ' ' + paddingOrgElement[3];
72
 
73
+ if( (dynamic == true) && ($('.cloned').length < 1) ) {
74
+ // DYNAMIC MODE: if there is no clone present, create it right now
75
+ createClone(stickyTop,stickyZindex);
76
+ }
77
+
78
+ $('.cloned').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthOrgElement).css('padding',paddingCloned).show();
79
+ $('.original').css('visibility','hidden');
80
+ } else {
81
+ // not scrolled past the menu; only show the original menu.
82
+ if(dynamic == true) {
83
+ $('.cloned').remove();
84
+ } else {
85
+ $('.cloned').hide();
86
+ }
87
+ $('.original').css('visibility','visible');
88
+ }
89
  }
90
+
91
+ function createClone(cloneTop,cloneZindex) {
92
+ $('.original').clone().insertAfter($('.original')).addClass('cloned').css('position','fixed').css('top',cloneTop+'px').css('margin-top','0').css('margin-left','0').css('z-index',cloneZindex).removeClass('original').hide();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
93
  }
 
94
 
95
  }(jQuery));
assets/js/jq-sticky-anything.min.js CHANGED
@@ -1 +1,5 @@
1
- (function(e){function t(t,n,r){var i=e(".original").offset();orgElementTop=i.top;var s=window,o="inner";if(!("innerWidth"in window)){o="client";s=document.documentElement||document.body}viewport=s[o+"Width"];if(e(window).scrollTop()>=orgElementTop-t&&viewport>=n&&viewport<=r){orgElement=e(".original");coordsOrgElement=orgElement.offset();leftOrgElement=coordsOrgElement.left;widthOrgElement=orgElement.css("width");paddingOrgElement=[orgElement.css("padding-top"),orgElement.css("padding-right"),orgElement.css("padding-bottom"),orgElement.css("padding-left")];paddingCloned=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3];e(".cloned").css("left",leftOrgElement+"px").css("top",t+"px").css("width",widthOrgElement).css("padding",paddingCloned).show();e(".original").css("visibility","hidden")}else{e(".cloned").hide();e(".original").css("visibility","visible")}}e.fn.stickThis=function(n){var r=e.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,debugmode:false},n);var i=e(this).length;if(i<1){if(r.debugmode==true){console.error("STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected.")}}else if(i>1){if(r.debugmode==true){console.error("STICKY ANYTHING DEBUG: There is more than one element with the selector/class/ID you selected. You can only make ONE element sticky.")}}else{e(this).addClass("original").clone().insertAfter(this).addClass("cloned").css("position","fixed").css("top",r.top+"px").css("margin-top","0").css("margin-left","0").css("z-index",r.zindex).removeClass("original").hide();checkElement=setInterval(function(){t(r.top,r.minscreenwidth,r.maxscreenwidth)},10)}return this}})(jQuery)
 
 
 
 
1
+ /**
2
+ * @preserve Sticky Anything 1.2 | @senff | GPL2 Licensed
3
+ */
4
+
5
+ !function(e){function n(n,t,o,d,s){var l=e(".original").offset();orgElementTop=l.top;var r=window,c="inner";"innerWidth"in window||(c="client",r=document.documentElement||document.body),viewport=r[c+"Width"],e(window).scrollTop()>=orgElementTop-n&&viewport>=t&&viewport<=o?(orgElement=e(".original"),coordsOrgElement=orgElement.offset(),leftOrgElement=coordsOrgElement.left,widthOrgElement=orgElement.css("width"),paddingOrgElement=[orgElement.css("padding-top"),orgElement.css("padding-right"),orgElement.css("padding-bottom"),orgElement.css("padding-left")],paddingCloned=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],1==s&&e(".cloned").length<1&&i(n,d),e(".cloned").css("left",leftOrgElement+"px").css("top",n+"px").css("width",widthOrgElement).css("padding",paddingCloned).show(),e(".original").css("visibility","hidden")):(1==s?e(".cloned").remove():e(".cloned").hide(),e(".original").css("visibility","visible"))}function i(n,i){e(".original").clone().insertAfter(e(".original")).addClass("cloned").css("position","fixed").css("top",n+"px").css("margin-top","0").css("margin-left","0").css("z-index",i).removeClass("original").hide()}e.fn.stickThis=function(t){var o=e.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,dynamicmode:!1,debugmode:!1},t),d=e(this).length;return 1>d?1==o.debugmode&&console.error("STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected."):d>1?1==o.debugmode&&console.error("STICKY ANYTHING DEBUG: There is more than one element with the selector/class/ID you selected. You can only make ONE element sticky."):(e(this).addClass("original"),1!=o.dynamicmode&&i(o.top,o.zindex),checkElement=setInterval(function(){n(o.top,o.minscreenwidth,o.maxscreenwidth,o.zindex,o.dynamicmode)},10)),this}}(jQuery);
assets/js/stickThis.js CHANGED
@@ -1,12 +1,16 @@
 
 
 
 
1
  (function($) {
2
  $(document).ready(function($) {
3
 
4
-
5
  $(sticky_anything_engage.element).stickThis({
6
  top:sticky_anything_engage.topspace,
7
  minscreenwidth:sticky_anything_engage.minscreenwidth,
8
  maxscreenwidth:sticky_anything_engage.maxscreenwidth,
9
  zindex:sticky_anything_engage.zindex,
 
10
  debugmode:sticky_anything_engage.debugmode
11
  });
12
 
1
+ /**
2
+ * @preserve Sticky Anything 1.2 | @senff | GPL2 Licensed
3
+ */
4
+
5
  (function($) {
6
  $(document).ready(function($) {
7
 
 
8
  $(sticky_anything_engage.element).stickThis({
9
  top:sticky_anything_engage.topspace,
10
  minscreenwidth:sticky_anything_engage.minscreenwidth,
11
  maxscreenwidth:sticky_anything_engage.maxscreenwidth,
12
  zindex:sticky_anything_engage.zindex,
13
+ dynamicmode:sticky_anything_engage.dynamicmode,
14
  debugmode:sticky_anything_engage.debugmode
15
  });
16
 
readme.txt CHANGED
@@ -4,7 +4,7 @@ Tags: plugin, sticky, menu, scroll, element
4
  Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
5
  Requires at least: 3.6
6
  Tested up to: 4.1
7
- Stable tag: 1.1.4
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -24,6 +24,7 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
24
  * **Positioning from top**: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the "ceiling" of the page.
25
  * **Enable for certain screen sizes only**: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don't want your element to be sticky on smaller screens, for example.
26
  * **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
 
27
  * **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
28
 
29
 
@@ -40,9 +41,11 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
40
  = I selected a class/ID in the settings screen, but the element doesn't stick when I scroll downs. Why not? =
41
  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.
42
 
43
- = I'm having some issues on mobile (or other responsive themes).
44
- Some themes use some JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn't exist in the HTML source code upon page load, but is created on the fly some time after the page is fully loaded. Since the Sticky Anything plugin only works with elements that are present in the HTML source code, this can cause issues.
45
- There is an experimental version of the plugin that addresses this issue, but it is not public since most themes do not use this method (and other plugins may rely on having the sticky menu present before they load). If you are interested in trying this version, please get in touch with me through http://www.senff.com/ and I will be happy to provide you this version, along with some help.
 
 
46
 
47
  = Still doesn't work. What could be wrong? =
48
  Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that returns zero elements on the page, OR more than one, it will be shown.
@@ -50,6 +53,23 @@ Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and yo
50
  = Is it possible to have multiple sticky elements? =
51
  The current version only allows one sticky element. Having more than one may clutter up your page and confuse the user (imagine having a menu stuck at the top, and a banner stuck on the left, and another thing on the right, etc.). Having said that, this functionality may be added to a future version.
52
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  = I'll need more help please! =
54
  The plugin's own page can be found [here](http://www.senff.com/plugins/sticky-anything-wp).
55
 
@@ -63,6 +83,9 @@ For any other issues, please use the [WordPress.org forum](https://wordpress.org
63
 
64
  == Changelog ==
65
 
 
 
 
66
  = 1.1.4 =
67
  * Ready for WordPress 4.1 (and TwentyFifteen).
68
  * Fixes issue when element has padding in percentages.
@@ -85,6 +108,9 @@ For any other issues, please use the [WordPress.org forum](https://wordpress.org
85
 
86
  == Upgrade Notice ==
87
 
 
 
 
88
  = 1.1.4 =
89
  * Ready for WordPress 4.1 (and TwentyFifteen).
90
  * Fixes issue when element has padding in percentages.
4
  Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
5
  Requires at least: 3.6
6
  Tested up to: 4.1
7
+ Stable tag: 1.2
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
24
  * **Positioning from top**: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the "ceiling" of the page.
25
  * **Enable for certain screen sizes only**: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don't want your element to be sticky on smaller screens, for example.
26
  * **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
27
+ * **Dynamic Mode**: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode. See below for details.
28
  * **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
29
 
30
 
41
  = I selected a class/ID in the settings screen, but the element doesn't stick when I scroll downs. Why not? =
42
  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.
43
 
44
+ = I'm having some issues on mobile (or other responsive themes). =
45
+ A number of people reported problems using a sticky element in a responsive theme - mostly situations involving a different menu (in both design and functionality) between desktop, tablet and mobile views. The newly-introduced 'Dynamic Mode' solves some of these problems. Try it yourself and chances are that works for you as well (though it's not a setting that will magically solves any and all problems that may occur).
46
+
47
+ = My menu sticks, but it doesn't open on the Responsive Theme when it's sticky. =
48
+ This is a known bug, and an incompatibility with the theme. I'm looking into it. For the time being, it would be better to turn off stickiness for the mobile menu (set "Do not stick element when screen smaller than:" to 651 pixels).
49
 
50
  = Still doesn't work. What could be wrong? =
51
  Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that returns zero elements on the page, OR more than one, it will be shown.
53
  = Is it possible to have multiple sticky elements? =
54
  The current version only allows one sticky element. Having more than one may clutter up your page and confuse the user (imagine having a menu stuck at the top, and a banner stuck on the left, and another thing on the right, etc.). Having said that, this functionality may be added to a future version.
55
 
56
+ = What is this Dynamic Mode thing exactly? =
57
+ To properly explain this, we'll need to go a little deeper in the plugin's functionality. So bear with me...
58
+
59
+ When an element becomes sticky at the top of the page (and keeps its place regardless of the scrolling), it's actually not the element itself you see, but a cloned copy of it (the original element is out of view and invisible).
60
+
61
+ The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.
62
+
63
+ In the original plugin version, the clone would be created right when you load the page. Then when you would scroll down, it would become visible (and stick at the top) while the original element would disappear.
64
+
65
+ However, some themes use some JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn't exist in the HTML source code when you load the page, but is created on the fly some time after the page is fully loaded -- in many cases, these menus would just be generated ONLY when the screen is more (or less) than a certain specific width. With the original version of the plugin, the problem would be that the original element may not have been fully created upon page load, so the clone would also not be fully functional.
66
+
67
+ In Dynamic Mode, a clone of the element is not created on page load -- instead, it's created when the user scrolls and hits the "sticky" point. This ensures that the cloned element is an actual 1-on-1 copy of what the original element consists of at that specific point (and not at the "page is loaded" point, which may be different if the element was altered since).
68
+
69
+ Why don't we use Dynamic Mode all the time then? This has to do with the fact that other plugins initialize themselves on page load and may need the full markup (including the cloned element) at that point. In Dynamic Mode, there is no clone available yet on page load, so that could cause an issue.
70
+
71
+ Phew!
72
+
73
  = I'll need more help please! =
74
  The plugin's own page can be found [here](http://www.senff.com/plugins/sticky-anything-wp).
75
 
83
 
84
  == Changelog ==
85
 
86
+ = 1.2 =
87
+ * Dynamic Mode added (addressing problems with dynamically created menus -- see Frequently Asked Questions above for details).
88
+
89
  = 1.1.4 =
90
  * Ready for WordPress 4.1 (and TwentyFifteen).
91
  * Fixes issue when element has padding in percentages.
108
 
109
  == Upgrade Notice ==
110
 
111
+ = 1.2 =
112
+ * Dynamic Mode added (addressing problems with dynamically created menus -- see Frequently Asked Questions above for details).
113
+
114
  = 1.1.4 =
115
  * Ready for WordPress 4.1 (and TwentyFifteen).
116
  * Fixes issue when element has padding in percentages.
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: 1.1.4
9
  */
10
 
11
  defined('ABSPATH') or die('INSERT COIN');
@@ -15,7 +15,7 @@ defined('ABSPATH') or die('INSERT COIN');
15
 
16
  if (!function_exists('sticky_anthing_default_options')) {
17
  function sticky_anthing_default_options() {
18
- $versionNum = '1.1.4';
19
  if (get_option('sticky_anything_options') === false) {
20
  $new_options['sa_version'] = $versionNum;
21
  $new_options['sa_element'] = '';
@@ -23,6 +23,7 @@ if (!function_exists('sticky_anthing_default_options')) {
23
  $new_options['sa_minscreenwidth'] = '';
24
  $new_options['sa_maxscreenwidth'] = '';
25
  $new_options['sa_zindex'] = '';
 
26
  $new_options['sa_debugmode'] = false;
27
  add_option('sticky_anything_options',$new_options);
28
  }
@@ -31,7 +32,7 @@ if (!function_exists('sticky_anthing_default_options')) {
31
 
32
  if (!function_exists('sticky_anything_update')) {
33
  function sticky_anything_update() {
34
- $versionNum = '1.1.4';
35
  $existing_options = get_option('sticky_anything_options');
36
 
37
  if(!isset($existing_options['sa_minscreenwidth'])) {
@@ -40,6 +41,11 @@ if (!function_exists('sticky_anything_update')) {
40
  $existing_options['sa_maxscreenwidth'] = '';
41
  }
42
 
 
 
 
 
 
43
  $existing_options['sa_version'] = $versionNum;
44
  update_option('sticky_anything_options',$existing_options);
45
  }
@@ -50,12 +56,12 @@ if (!function_exists('load_sticky_anything')) {
50
  function load_sticky_anything() {
51
 
52
  // Main jQuery plugin file
53
- wp_register_script('stickyAnythingLib', plugins_url('/assets/js/jq-sticky-anything.min.js', __FILE__), array( 'jquery' ), '1.1');
54
  wp_enqueue_script('stickyAnythingLib');
55
 
56
  $options = get_option('sticky_anything_options');
57
 
58
- // Set defaults when empty (because '' does not work with the JQ plugin)
59
  if (!$options['sa_topspace']) {
60
  $options['sa_topspace'] = '0';
61
  }
@@ -78,10 +84,11 @@ if (!function_exists('load_sticky_anything')) {
78
  'minscreenwidth' => $options['sa_minscreenwidth'],
79
  'maxscreenwidth' => $options['sa_maxscreenwidth'],
80
  'zindex' => $options['sa_zindex'],
 
81
  'debugmode' => $options['sa_debugmode']
82
  );
83
 
84
- wp_enqueue_script('stickThis', plugins_url('/assets/js/stickThis.js', __FILE__), array( 'jquery' ), '1.1', true);
85
  wp_localize_script( 'stickThis', 'sticky_anything_engage', $script_vars );
86
 
87
  }
@@ -233,6 +240,15 @@ if (!function_exists('sticky_anything_config_page')) {
233
  </td>
234
  </tr>
235
 
 
 
 
 
 
 
 
 
 
236
  <tr>
237
  <th scope="row">Debug mode: <a href="#" title="When Debug Mode is on, error messages will be shown in your browser's console when the element you selected either doesn't exist, or when there are more elements on the page with your chosen selector." class="help">?</a></th>
238
  <td>
@@ -255,7 +271,7 @@ if (!function_exists('sticky_anything_config_page')) {
255
 
256
  <hr />
257
 
258
- <p><a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">Sticky Menu (or Anything!) on Scroll</a> version 1.1.4 by <a href="http://www.senff.com" target="_blank">Senff</a> &nbsp;/&nbsp; <a href="http://www.senff.com/contact" target="_blank">Please Report Bugs</a> &nbsp;/&nbsp; Follow on Twitter: <a href="http://www.twitter.com/senff" target="_blank">@Senff</a> &nbsp;/&nbsp; <a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">Detailed documentation</a> &nbsp;/&nbsp; <a href="http://www.senff.com/plugins/sticky-anything" target="_blank">Non-WP jQuery plugin</a></p>
259
 
260
  </div>
261
 
@@ -310,6 +326,14 @@ if (!function_exists('process_sticky_anything_options')) {
310
  }
311
  }
312
 
 
 
 
 
 
 
 
 
313
  foreach ( array('sa_debugmode') as $option_name ) {
314
  if ( isset( $_POST[$option_name] ) ) {
315
  $options[$option_name] = true;
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: 1.2
9
  */
10
 
11
  defined('ABSPATH') or die('INSERT COIN');
15
 
16
  if (!function_exists('sticky_anthing_default_options')) {
17
  function sticky_anthing_default_options() {
18
+ $versionNum = '1.2';
19
  if (get_option('sticky_anything_options') === false) {
20
  $new_options['sa_version'] = $versionNum;
21
  $new_options['sa_element'] = '';
23
  $new_options['sa_minscreenwidth'] = '';
24
  $new_options['sa_maxscreenwidth'] = '';
25
  $new_options['sa_zindex'] = '';
26
+ $new_options['sa_dynamicmode'] = false;
27
  $new_options['sa_debugmode'] = false;
28
  add_option('sticky_anything_options',$new_options);
29
  }
32
 
33
  if (!function_exists('sticky_anything_update')) {
34
  function sticky_anything_update() {
35
+ $versionNum = '1.2';
36
  $existing_options = get_option('sticky_anything_options');
37
 
38
  if(!isset($existing_options['sa_minscreenwidth'])) {
41
  $existing_options['sa_maxscreenwidth'] = '';
42
  }
43
 
44
+ if(!isset($existing_options['sa_dynamicmode'])) {
45
+ // Introduced in version 1.2
46
+ $existing_options['sa_dynamicmode'] = false;
47
+ }
48
+
49
  $existing_options['sa_version'] = $versionNum;
50
  update_option('sticky_anything_options',$existing_options);
51
  }
56
  function load_sticky_anything() {
57
 
58
  // Main jQuery plugin file
59
+ wp_register_script('stickyAnythingLib', plugins_url('/assets/js/jq-sticky-anything.min.js', __FILE__), array( 'jquery' ), '1.2');
60
  wp_enqueue_script('stickyAnythingLib');
61
 
62
  $options = get_option('sticky_anything_options');
63
 
64
+ // Set defaults for by-default-empty elements (because '' does not work with the JQ plugin)
65
  if (!$options['sa_topspace']) {
66
  $options['sa_topspace'] = '0';
67
  }
84
  'minscreenwidth' => $options['sa_minscreenwidth'],
85
  'maxscreenwidth' => $options['sa_maxscreenwidth'],
86
  'zindex' => $options['sa_zindex'],
87
+ 'dynamicmode' => $options['sa_dynamicmode'],
88
  'debugmode' => $options['sa_debugmode']
89
  );
90
 
91
+ wp_enqueue_script('stickThis', plugins_url('/assets/js/stickThis.js', __FILE__), array( 'jquery' ), '1.2', true);
92
  wp_localize_script( 'stickThis', 'sticky_anything_engage', $script_vars );
93
 
94
  }
240
  </td>
241
  </tr>
242
 
243
+ <tr>
244
+ <th scope="row">Dynamic mode: <a href="#" title="When Dynamic Mode is OFF, a cloned element will be created upon page load. If this mode is ON, a cloned element will be created every time your scrolled position hits the 'sticky' point." class="help">?</a></th>
245
+ <td>
246
+ <input type="checkbox" id="sa_dynamicmode" name="sa_dynamicmode" <?php if ($sticky_anything_options['sa_dynamicmode'] ) echo ' checked="checked" ';?> />
247
+ <label for="sa_debugmode"><strong>If the plugin doesn't work in your theme (often the case with responsive themes), try it in Dynamic Mode.</strong></label>
248
+ <p class="description">NOTE: this is not a 'Magic Checkbox' that fixes all problems. It simply solves <em>some</em> issues that frequently appear with some responsive themes, but doesn't necessarily work in <em>all</em> situations.</p>
249
+ </td>
250
+ </tr>
251
+
252
  <tr>
253
  <th scope="row">Debug mode: <a href="#" title="When Debug Mode is on, error messages will be shown in your browser's console when the element you selected either doesn't exist, or when there are more elements on the page with your chosen selector." class="help">?</a></th>
254
  <td>
271
 
272
  <hr />
273
 
274
+ <p><a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">Sticky Menu (or Anything!) on Scroll</a> version 1.2 by <a href="http://www.senff.com" target="_blank">Senff</a> &nbsp;/&nbsp; <a href="http://www.senff.com/contact" target="_blank">Please Report Bugs</a> &nbsp;/&nbsp; Follow on Twitter: <a href="http://www.twitter.com/senff" target="_blank">@Senff</a> &nbsp;/&nbsp; <a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">Detailed documentation</a> &nbsp;/&nbsp; <a href="http://www.senff.com/plugins/sticky-anything" target="_blank">Non-WP jQuery plugin</a></p>
275
 
276
  </div>
277
 
326
  }
327
  }
328
 
329
+ foreach ( array('sa_dynamicmode') as $option_name ) {
330
+ if ( isset( $_POST[$option_name] ) ) {
331
+ $options[$option_name] = true;
332
+ } else {
333
+ $options[$option_name] = false;
334
+ }
335
+ }
336
+
337
  foreach ( array('sa_debugmode') as $option_name ) {
338
  if ( isset( $_POST[$option_name] ) ) {
339
  $options[$option_name] = true;