Javascript 使用HTML/CSS的浮动菜单栏？

想知道是否有人知道一种创建浮动菜单栏的方法，该菜单栏会附着在页面上的某个点上，直到浏览器窗口在页面下方足够远的位置并将其取消粘贴，然后菜单栏开始随页面滚动。我想要的效果与这个javascript菜单完全相同。然而，我真的很想用CSS来实现这一点。我知道我可以使div绝对定位，它将在页面上向下移动，我尝试使一个div相对定位（父div），然后在这个div内另一个div是绝对定位的，但我无法让它工作。是否有人知道如何使用CSS来实现这一点，或者它需要是JS

提前谢谢

---

乔恩。

我认为应该是JS。我可以想象使用jQuery可以非常简单，我真的想不出只有使用CSS才能实现这一点的任何方法。我会试着考虑一下，但我怀疑我是否能找到解决方案。

好吧，绝对定位div在亲戚中是不可能做到的。固定位置基本上是相对于窗口的绝对定位div。我想说，您在这里肯定需要javascript。

如果您不需要动画，那么就使用

位置：固定

在css中

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

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

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

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

我相信使用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'});
    }
});


$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>=200）
{
$（“#floatbar”）.css（{位置：'fixed'，左：'0'，顶部：'0'}）；
}
其他的
{
$（“#floatbar”）.css（{位置：'absolute'，左：'0'，顶部：'200px'}）；
}
});
非常感谢shiznit123，我想这可能只有通过javascript才能实现。我只是认为可能会有一些CCS固定/相对/绝对定位的组合。然后我不得不使用javascript，我只是发现javascript会让我的代码变得凌乱，因为它可以用CSS来完成。再次感谢！