JavaScript sticky menu widget infinite scroll bug

I am developing a webpage for a client and I decided to make a reusable JavaScript widget the makes the menu sticky, i.e, if you try to scroll past the menu it sticks to the top of the window so you can always see it. I call it MenuPop (not menu popup!)

It works beautifully…when the window is maximized! But if the window is “restored” i.e. in resizable mode, or you have firebug up or something else using more than half the vertical space of the window like tiled open webpages or having too many toolbars, there is an infinite scroll bug when you scroll down, i.e. the page keeps extending down into blank space. This did not happen before I added the MenuPop widget so I know that is the culprit.

All I do is make the menu’s top style the same as the scrollTop variable…

Here is the site, you can use firebug to look at the code:
[URL=”http://heavenlypaws.com.windflower.arvixe.com/Default.aspx”]http://heavenlypaws.com.windflower.arvixe.com/Default.aspx[/URL]

If you have a large resolution monitor or full screen the window you won’t get the menu pop effect or the bug since the sites pages are not really that tall. Make the window smaller or use something that eats up half your browser’s vertical space (firebug, toolbars, etc.)to see the effect and the bug. The menu doesn’t work right for touch screens either; I will be making a touch screen usable master page and menu for mobiles at a later date. I am using asp.net and the site is not finished nor “live” yet, meaning the domain name (heavenlypaws.com) is still linked to the old site. I still need to make login, feedback, and other pages, add more products, etc. I am aware there are plenty of dead links so please don’t comment on the state of completion. I just need help with the infinite scroll bug.

Here is the initalizing code:

[code]<script src=”js/menupop.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var previousOnload = window.onload;
window.onload = function () {
if (previousOnload) {
previousOnload();
}
//only one per page
//tip: use the id of the menu’s container that has the border style
//menupop(“menuid” as string with quotes);
menuPop(“mainmenu”);
}
</script>[/code]

Here is menupop.js :

[CODE]/**********************************/
/* Jon’s Menu Pop to Top Widget */
/**********************************/
/* Version 1.0 Created Feb 2014 */
/**********************************/

//global variables
//menu’s start top
var sTop = 0;
//menu id string
var ids = “”;

//get an element’s position
//basic google found cross browser function
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;

while (element) {
xPosition += (element.offsetLeft – element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop – element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { left: xPosition, top: yPosition };
}

//change menu’s position based on scroll
function checkScroll() {
//get the menu’s element
var menuelem = document.getElementById(ids);
//get new scroller position
try {
var scrll = window.document.body.scrollTop || document.documentElement.scrollTop;
st = scrll;
}
//if no scroller
catch (err) {
st = 0;
}
//if scrolled passed menu but not content, leave the menu’s background transparent
if (st > sTop & st < sTop + 18) {
//set top of menu to the same as the scroll top so that it stays at the top of the screen
var stylestring = “position: absolute; top: ” + st + “px;”;
menuelem.setAttribute(“style”, stylestring);
}
//if scrolled past content as well, make menu’s background solid as well
else if (st >= sTop + 18) {
//set top of menu to the same as the scroll top so that it stays at the top of the screen
stylestring = “position: absolute; top: ” + st + “px; background-color: #A0BDE7;”;
menuelem.setAttribute(“style”, stylestring);
}
//else make sure then menu is back to it’s original position
else {
var stylestring = “position: absolute; top: “+ sTop +”px;”;
menuelem.setAttribute(“style”, stylestring);
}
//keep checking
setTimeout(function () { checkScroll(); }, 1);
}

function menuPop(menuid) {
//get the menu’s element
var elem = document.getElementById(menuid);
//get it’s start position
var rect = getPosition(elem);
//save it’s id
ids = menuid;
//save it’s start top; fix it’s offset
sTop = (parseInt(rect.top) – 4);
//check if scrolled
checkScroll();
}[/CODE]

Does anyone have any clues to a solution?

Also in #JavaScript _↴