Hi Mark,
So I kinda got pressured into debugging it myself as we have a deadline looming.
I found the root cause and applied a workaround that makes it work for me for now. However, it would be good if you could apply a fix because that would enable me to use your minified script and move this to production mode.
The root cause of the issue is that you apply a set width property to the original element in javascript, but you use a jquery to get the original width. The problem with this is that in my case the width is not a round number in pixels but jquery returns a rounded-down number. This is explained here for example:
http://stackoverflow.com/questions/3603065/how-to-make-jquery-to-not-round-value-returned-by-width
This causes the width of my menu to be a fraction of a pixel smaller than needed and the last item moves into the next line.
I have initially tried fiddle from line 150:
widthSticky = $('.sticky-element-original').css('width');
if(widthSticky == '0px') {
widthSticky = ($('.sticky-element-original')[0].getBoundingClientRect().width);
}
by commenting out the if clause so in all cases the width it taken by using getBoundingClientRect, but the problem is that because your script is called repeatedly, then the width gets added to repeatedly and over the next couple of seconds the bar grows to the right and out of the viewport (and I can see in the inspector window it just keeps growing all the time).
So I resorted right now to simply remove the part where you are setting the width to the original element, so instead of this:
$('.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);
I just have this:
$('.sticky-element-original').removeClass('sticky-element-active').css('position','fixed').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('margin-left',0).css('padding',paddingSticky).css('margin-top',stickyTopMargin).css('z-index',stickyZindex);
I am sure you would have a good reason setting the width which probably is not applicable in my situation so for me this produces a working result, so I now have this as a workaround in place. You may need to consider whether this is universally acceptable or an alternative approach need to be made – one idea I was toying with is comparing $(‘.sticky-element-original’).css(‘width’) with $(‘.sticky-element-original’)[0].getBoundingClientRect().width and adjusting for the difference (i.e. the fraction that .css(‘width’) rounds down), but that may or may not work in all circumstances, so in the end I just thought I will let you work this out.
