css - 固定元素在特定高度可见

Question

有没有办法在不使用 javascript 的情况下强制固定元素显示在特定高度？我有一个应该作为菜单的固定元素，但只有在网站的前 900px 向下滚动后才能看到，从那时起，它现在是一个简单的固定菜单：

#actual-menu{
    margin-top:50px;
    float: left;
    border: 1px solid #ccc;
    position: fixed;
    left:0;
    top:20px;
}

但是，如果我离开“top：20px”，那么我会在滚动 900px 之前看到它，如果我将其设为 920px，那么我永远不会看到它。有没有办法让它“等待”直到用户在那里然后移动？（最好只有css）

Answer 1

@Luis，试试这个

HTML

<div id="main">
    <div id="divmenu"></div>
</div>

CSS

#main{
    width:100%;
    height:1500px;
    background:#CCC;
}
#divmenu{
    margin-top:50px;
    border: 1px solid #ccc;
    position:fixed;
    left:0;
    background:#000;
    width:0px;
    height:0px;
}

jQuery

$(window).scroll(function(){
    if ($(this).scrollTop() > 900) {
        $('#divmenu').fadeIn('slow',function(){$(this).css({'width':'100px', 'height':'100px'});});
    } else {
        $('#divmenu').fadeOut('slow');
    }
});

Answer 2

也许如果你使用绝对？

    #actual-menu{
    margin-top:50px;
    border: 1px solid #ccc;
    position: absolute;
    left:0;
    top:920px;
}

当然，这样它会向上滚动而不是弹出，并且也top:920px应该相应地更改为父元素......否则我建议使用Javascript。

Answer 3

我不认为你可以用 CSS 做到这一点，但 jQuery 让它变得非常容易：

$(window).scroll(function(){
    if ($(this).scrollTop() > 900) {
        $('#divmenu').fadeIn('slow');
    } else {
        $('#divmenu').fadeOut('slow');
    }
});