在特定高度可见的固定元素

有没有办法强制固定元素在某些高度显示而不使用javascript？我有一个应该作为一个菜单，但后点的前900px滚动下来，并从该点开始，现在它是一个简单固定的菜单应该只可见一个固定的元素：在特定高度可见的固定元素

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

但是如果我离开“top：20px”然后我看到它在900px滚动之前，如果我使它成为920px，那么我从来没有看到它。有没有办法让它“等待”，直到用户在那里然后移动？（仅适用于CSS最好）

来源

2013-02-23 Tsundoku

我不认为你可以用CSS做，但jQuery的说得很简单：

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

来源

2013-02-23 10:45:05

尝试这款本只fadesout当我滚动一路到顶部但不会注册以下任何东西= / – Tsundoku 2013-02-23 18:42:50

也许如果你使用绝对？

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

当然，这种方式反而会向上滚动蹦出来的，也应top:920px相应地改变父元素......否则，我建议使用JavaScript。

来源

2013-02-23 11:13:11 xpy

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

来源

2013-02-24 06:49:13

在特定高度可见的固定元素

回答

相关问题