CODEWITHSUNDEEP
javascripthtml
Jon Kyte
Jon Kyte

Reputation: 2020

floating menu bar in containing div (js)

I have a JavaScript menu bar that is positioned on my webpage, then when the browser bar reaches the top of the menu it locks into a fixed position and moves with the window. However, i need to contain the menu within a div, how can this be done?

This is my menu bar:

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() >= 200)
        {
            $("#floatbar").css({position:'fixed',left:'0',top:'0'});
        }
        else
        {
            $("#floatbar").css({position:'absolute',left:'0',top:'200px'});
        }
    });
});
</script>

and this is my html:

<div id="menu_runner">
    <div id="floatbar">
        <a href="#issue49">Issue 49</a><br />
        <a href="#issue48">Issue 48</a><br />
        <a href="#issue47">Issue 47</a><br />
        <a href="#issue46">Issue 46</a><br />
    </div>
</div>

and my css:

#menu_runner {
    width: 100px;
    height: 2000px;
    float: right;
    position: relative;
}
#floatbar {
    width: 70px;
    position: absolute;
    top: 200px;
}

where the menu runner is the containing div of the menu, and the floatbar obviously contains the menu which runs the JavaScript.

However when I try this code, the menu sticks to the left and 200px from the top, and not within the menu_runner div. How can i make the floatbar be positioned in the menu_runner div and then scroll down with the JavaScript within the div as it should.

Here's a live demo of my code: http://jsfiddle.net/f4dhy/

Upvotes: 1

Views: 4453

Answers (1)

zxt
zxt

Reputation: 2130

Here's one method:

Live demo

Javascript:

$(window).scroll(function() {
if ($(window).scrollTop() >= 200) {
    screenWidth = $(window).width();
    containerWidth = $("#menu_runner").outerWidth(true);
    pos = screenWidth - containerWidth;
    $("#floatbar").css({
        position: 'fixed',
        left: pos,
        top: '0'
    });
}
else {
    $("#floatbar").css({
        position: 'absolute',
        left: '0',
        top: '200px'
    });
}
});

The idea is get the screen's width, the menu container's width, and from that we get figure out how to position the left edge of the menu so that it lines up with the container.

In your css, add:

body{
    padding: 0;
    margin: 0;
}

which fixes the slightly off positioned problem you'd see without it due to the default margin set by browsers.

You might see the menu kinda bounce into position when you scroll it to the top, which is unfortunate but hopefully not too much of a problem.

This doesn't work in IE6 because of the position:fixed being used. You'll have to search for a solution to that. I'm not too familiar with what the accepted workaround is (but a quick google search shows a few hacks that might work)

I'm curious though, any reason you want to do it this way? Why have the menu scroll with the screen and then stop at the top? Why not just fix it to one place on the screen from the start, something like this?

Upvotes: 3

Related Questions