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

我认为你不能用CSS做到这一点，但jQuery让它变得非常简单：

$(window).scroll(function(){
    if ($(this).scrollTop() > 900) {
        $('#divmenu').fadeIn('slow');
    } 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

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

固定元素在某个高度可见

3 个答案: