www.webdeveloper.com
Results 1 to 3 of 3

Thread: JavaScript sticky menu widget infinite scroll bug

  1. #1
    Join Date
    Feb 2014
    Posts
    6

    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:
    http://heavenlypaws.com.windflower.a...m/Default.aspx

    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>
    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();
    }

    Does anyone have any clues to a solution?

  2. #2
    Join Date
    Feb 2014
    Posts
    6
    I think I figured it out. The browser tries to preserve room for my lengthy pop up sub menus. The further down the menu goes, it always needs enough room for the pop up sub menus. I'm gonna try adding code that will only let the menu go down only so far that the bottom most item in the sub menus is still over the footer and it does not go down further.....

  3. #3
    Join Date
    Feb 2014
    Posts
    6
    That fixed it. I only let it move about 135 pixels, and no infinite scroll bug. This works better if you do not have long pop up sub menus.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles