浮动菜单栏使用HTML/CSS？

Question

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

提前致谢.

乔恩.

Answer 1

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