使用HTML/CSS制作浮动式菜单栏？

Question

使用HTML/CSS制作浮动式菜单栏？

5

我想知道是否有一种方法可以创建一个浮动菜单栏，它会粘在页面上的某个点，直到浏览器窗口滚动到页面下方并将其分离，然后菜单栏开始随着页面一起滚动。我想要的效果与这个javascript菜单完全相同：http://www.jtricks.com/javascript/navigation/floating.html。但是，我真的想用CSS来实现这个效果。我知道我可以使div绝对定位并沿着页面移动，我试过让一个DIV相对定位（父div），然后再在里面放置另一个绝对定位的div，但是我无法让它们正常工作。有人知道如何使用CSS实现这个效果吗？还是需要使用JS？谢谢。

- Jon Kyte

6个回答

3

如果您不需要动画效果，只需在CSS中使用position: fixed;即可。

如果您需要动画效果，则需要使用JavaScript。例如，在jQuery中：

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

- Naftali

1

如果有一个固定的侧边栏和一个浮动的内容区域，这应该很容易实现。尝试像这样做...

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

- Kory

1

你不能在相对定位的 div 中使用绝对定位。固定定位基本上是一个绝对定位的 div，相对于窗口进行定位。我认为你肯定需要 JavaScript。

- Stanislav Ageev

1

这是一篇旧文章，但自那时以来CSS已经发生了很大变化，我们可以使用纯CSS来创建一个浮动菜单。请参见下面的示例代码。感谢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>

- Estin Chin

0

我认为需要使用JS。我可以想象用jQuery可能会相当简单，但我真的想不出只用CSS就能实现这个的任何方法。我会尝试思考一下，但我怀疑我会找到解决方案。

- Frantisek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- agradl · Accepted Answer

我相信使用JavaScript是实现你所描述效果的唯一解决方案。这里有一个快速演示，它展示了一个横幅从绝对位置开始，当用户滚动时变为固定位置。

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