Support » Plugin: Sticky Menu (or Anything!) on Scroll » Menu item moves out of line

  • Hi,

    I have tried to apply your plugin but it looks as if there is a rounding mistake somewhere as it calculates the sizes in Javascript as it tries to display the menu.
    When I apply your plugin, the last menu item (Login/Logout) moves out of line and underneath the first menu item. I have played around in Chrome Developer Tools with the inline styles the plugin Javascript applies and it looks like this is because of a 1px difference – if I increase the assigned width property to the element, the Login/Logout item jumps back in line, however then the menu bar then overflows the element underneath by 1px to the right. Without the plugin, it aligns perfectly.

    I have also tried enabling legacy mode, at which point the Login/logout menu item no longer jumps into the next line, however, the menu bar then overflows to the right even more.

    You can see it currently as I am trying it out on http://wessex-oc.org.uk/
    (currently not in legacy mode). Note that we are looking to go live with this site soon so I may need to disable the plugin soon if there is no resolution.

Viewing 12 replies - 1 through 12 (of 12 total)
  • I should note that this happens under IE11 and Chrome 55.0.2883.87, but does not happen under Firefox 50.1

    Also, I have tried changing some of the menu text to see if this was just pure bad luck with the combination of text content producing an odd length, but I got the same behaviour even after changing some of the menu text.

    Plugin Contributor Senff

    (@senff)

    Hi, thanks for trying my plugin! 🙂

    Can you please go into the plugin settings and enable “Debug Mode”? That way it’s a bit easier for me to debug this and see how we can solve this.

    Thanks!

    Hi, Debug mode enabled.

    Hi,

    I wonder if you need any more information to progress – happy to help with the troubleshooting if that helps.

    Peter

    Plugin Contributor Senff

    (@senff)

    No, not any more information needed. This should work. Please keep debug mode on, I will need a bit of time to look into this. I’ll let you know what I’ll find ASAP!

    Hi Mark,

    Sorry not trying to hurry you just checking if you got anywhere and expecting to. I may need to start looking at alternatives if this does not work, don’t want you to be in the middle of it and be surprised if I switch. Equally, I would need to allow for learning any new plugin so it would be good to be able to predict what is likely to happen.

    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.

    Plugin Contributor Senff

    (@senff)

    Oh, I’m so sorry. This completely fell through the cracks on my end.

    I’m glad it works for you now, but rest assured I will definitely keep looking into it. I kinda had the root cause pegged as well, but I was basically just trying to remember why I did it like that (it doesn’t make sense to me now!)… I must have had a reason!

    As soon as I’ve figured out what the deal is exactly and I can come up with a solution that’s universal, I will update the plugin and let you know.

    Again, my apologies!

    Hi Mark,

    just bumping this as we have now gone live with the website so I am hoping I can move to a final fixed version, without the non-minified debug JS in which I did the workaround.

    Peter

    Plugin Contributor Senff

    (@senff)

    Hi Peter,

    I had a fix in place, and then it turned out it broke all kinds of other things. Happy you still have a temp solution in place, and I’ll keep working on this. This upcoming week I’ll set aside some time for that.

    I’ll keep you posted!

    Bump – wondering if you will get a chance to have a fix?

    I am living with a Debug mode for now but it is far from elegant…

    Plugin Contributor Senff

    (@senff)

    Hi Paul,

    I finally found some time to look into this, and checked this rounding error in detail. The funny thing is that I can not reproduce it at all.

    For example, on my test site, an element would be 525.44 pixels wide. Once it becomes sticky, I expected it to be a round 525, but that doesn’t seem to be the case.

    Would you be able to help out and debug it (again)? If you’d be able to, I’d need you to put the plugin in debug mode and add an additional line so I could see the proper width calculation. Please let me know and I’ll give you some more details.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Menu item moves out of line’ is closed to new replies.