5

wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.html javascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?

Thanks in advance.

Jon.

6 Answers 6

9

I believe using javascript is the only solution to get the effect you described. Here's a quick demo of a banner that starts in a absolute position and goes to fixed when the user scrolls.

<div style="height:1000px;width:500px;">

    <div id="floatbar" style="background:gray;
                                width:200px;
                                height:40px;
                                position:absolute;
                                left:0;top:200px;">
    </div>
</div>

$(window).scroll(function(){
    if ($(window).scrollTop() >= 200)
    {
        $("#floatbar").css({position:'fixed',left:'0',top:'0'});
    }
    else
    {
        $("#floatbar").css({position:'absolute',left:'0',top:'200px'});
    }
});
1
  • Thank you so much shiznit123, I thought this may be only attainable with javascript. I just thought there may be some combination of CCS fixed/relative/absolute positioning. I'll have to use javascript then, I just find javascript makes my code messy when it can be done with CSS. Again, thanks!
    – Jon Kyte
    Mar 16, 2011 at 16:09
3

well if you do NOT need the animation, than just use
position: fixed;
in the css.

if you want it animated you need to use javascript. for example in jquery:

$(window).scroll(function(){
   $('#menu').css({
       right: 0,
       top: 0
   })
})
1

Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.

1

This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...

#container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

#sidenav {
    width: 300px;
    position: fixed; /*--Fix the sidenav to stay in one spot--*/
    float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}

#content {
    float: right; /*--Keeps content to the right side--*/
    width: 620px;
    padding: 0 20px 20px;
}
1

This is old post but CSS has changed a lot since then, we can do a floating menu with plain CSS. See sample code below. Credit to https://www.quackit.com/css/codes/css_floating_menu.cfm

  main {
    margin-bottom: 200%;
  }
  .floating-menu {
    font-family: sans-serif;
    background: yellowgreen;
    padding: 5px;;
    width: 130px;
    z-index: 100;
    position: fixed;
    right: 0px;/* You can change float left/right */
  }
  .floating-menu a, 
  .floating-menu h3 {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
  }
<!DOCTYPE html>
<title>Example</title>

<main>
  <p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
  <nav class="floating-menu">
    <h3>Floating Menu</h3>
    <a href="/css/">CSS</a>
    <a href="/html/">HTML</a>
    <a href="/database/">Database</a>
  </nav>
</main>

0

I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.