Question

想知道是否有人知道创建浮动菜单栏的方法，该菜单栏粘贴到页面上的某个点，直到浏览器窗口在页面上足够远并且将其展开，然后菜单栏开始随之滚动。我想要的效果与此http://www.jtricks.com/javascript/navigation/floating.html javascript菜单完全相同。但是，我真的想用CSS做到这一点。我知道我可以使div绝对定位并且它将向下移动页面，我尝试使一个DIV相对定位（父div）然后在其中另一个div是绝对定位的，但我无法使其工作。有没有人知道如何使用CSS工作，还是需要JS？

提前致谢。

乔恩。

Answer 1

我相信使用javascript是获得你所描述效果的唯一解决方案。这是一个快速demo横幅，以绝对位置开始，并在用户滚动时固定。

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

Answer 2

如果你不需要动画，那就好了 position: fixed;
在css。

如果你想要动画，你需要使用javascript。例如在jquery中：

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

Answer 3

嗯，你不能用亲戚里面的绝对定位div来做。固定位置基本上是绝对定位的div，相对于窗口定位。我会说你肯定需要这里的javascript。

Answer 4

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

Answer 5

使用固定侧边栏和浮动内容部分，这应该相当容易。尝试这样的事情......

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

Answer 6

这是旧帖子，但自那时起 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>

浮动菜单栏使用HTML / CSS？

6 个答案: