Floating menu bar using HTML/CSS?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-16 20:09 出处：网络

相关专题：css javascript

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.开发者_Python百科 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.

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

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

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.

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

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>

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.