Dear developer community, iím struggling with some problems regarding a fixed menu item. I should mention that iím still a beginner in javascript. Iíve searched the web and found this code on how to stop a fixed menu item for overlapping with the footer :

<script src=""></script>
  function checkOffset() {
    var a=$(document).scrollTop()+window.innerHeight;
    var b=$('#footer').offset().top;
    if (a<b) {
      $('#menuC').css('bottom', '0px');
    } else {
      $('#menuC').css('bottom', (0+(a-b))+'px');
and itís working. Menu stops before the footer. The problems that i have now are:

1) the menu item, depending on the height of the browser or the resolution of the screen, is not always at the same spot. e.g. if the resolution is 1366 x 768 than the pixels above are almost ok, if the resolution is higher or lower than i need to change the numbers so that the menu stays where it should be. Should i change something on that code to make it compatible for all resolutions or should i put a complete different code that fits my needs best ?

2) i added this code to one php file where the particular menu item is (just to experiment) but i want it to be everywhere else where the same menu is in use and it seems kinda troublesome to copy-paste it to each php file since there are a lot of them. Is there a way for example to include this code in the css where all the properties for the menu are or something along those lines so that i only have to write it once ?

Sorry for the long post and please be patient with me.

Thanks in advance leftycool