SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do you stop a floating menu on an absolute position?

    Hi, I have this code for a floating menu - but it starts on an absolute position and then starts to move as you scroll once it reaches a certain distance from the top of the browser, I have seen floating menus that will also stop in a certain spot on the page, even if you continue to scroll the page, can I alter this code to make this menu stop at a certain point on the page?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test floating menu</title>
    <style type="text/css">
    div.banner {
        margin: 0;
        position: absolute;
        top: 100px;
        font-size: 80% /*smaller*/;
        font-weight: bold;
        line-height: 1.1;
        left: auto;
        width: 8.5em;
        right: 2em;
    }
    div.banner ol {
        list-style-type: none;
    }
    div.fixedBanner {
        position: fixed;
        top: 20px;
    }
    </style>
    </head>
    <body>
    <div id="myBanner" class="banner">
        <ol>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ol>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <script type="text/javascript">
    function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(ele, cls) {
        if (!this.hasClass(ele, cls)) {
            ele.className += " " + cls;
        }
    }
    function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }
    setInterval(function () {
        var el = document.getElementById('myBanner'),
        offset = document.documentElement.scrollTop || document.body.scrollTop;
        if (offset > 80) { // = 100 - 20
            addClass(el, 'fixedBanner');
        } else {
            removeClass(el, 'fixedBanner');
        }
    }, 50);
    </script>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas? I know you can do this, just not sure if I can alter this code to make it work.

  3. #3
    SitePoint Enthusiast alokjain_lucky's Avatar
    Join Date
    Feb 2008
    Location
    India
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope this will help.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test floating menu</title>
    <style type="text/css">
    div.banner {
        margin: 0;
        position: fixed;
        top: 100px;
        font-size: 80% /*smaller*/;
        font-weight: bold;
        line-height: 1.1;
        left: auto;
        width: 8.5em;
        right: 2em;
    }
    div.banner ol {
        list-style-type: none;
    }
    div.fixedBanner {
        position: fixed;
        top: 100px;
    }
    </style>
    </head>
    <body>
    <div id="myBanner" class="banner">
        <ol>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ol>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <script type="text/javascript">
    function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(ele, cls) {
        if (!this.hasClass(ele, cls)) {
            ele.className += " " + cls;
        }
    }
    function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }
    setInterval(function () {
        var el = document.getElementById('myBanner'),
        offset = document.documentElement.scrollTop || document.body.scrollTop;
        if (offset > 80) { // = 100 - 20
            addClass(el, 'fixedBanner');
        } else {
            removeClass(el, 'fixedBanner');
        }
    }, 50);
    </script>
    </body>
    </html>

  4. #4
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need the menu to start out in an absolute position, and then go to fixed when you scroll but then stop at a certain spot on the page, when if you continue to scroll - this is so the menu doesn't go down and on top of the long footer section.

  5. #5
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where are all teh .js wizards at?!!?!

  6. #6
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do I need to beg to get help on this, because I'm NOT above begggginn!!!! PLESSSSSSSSSSSSSASEEEEEEEEEEEE HELP ME. PLEASE KIND SIRs

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with switching from position:absolute to position:fixed and back again is that:

    - You'll get uneven results (ie the box will stop at different places because scrolling is not done by 1px but in chunks and chunks will be of different size)

    or

    - You'll get jitter (if you compensate for that by moving position:absolute box).

    Its better to use moving position:absolute box which will compensate for jumpy scrolling through animation, such as this one.


Bookmarks

Posting Permissions

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