1

JavaScriptを使用せずに固定要素を特定の高さに強制的に表示する方法はありますか? メニューとして機能する固定要素がありますが、サイトの最初の 900 ピクセルが下にスクロールされた後にのみ表示され、その時点以降は単純な固定メニューです。

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

ただし、「top:20px」のままにすると、900px がスクロールされる前に表示され、920px にすると表示されなくなります。ユーザーがそこにいるまで「待機」してから移動する方法はありますか? （できればcssのみで）

4

3 に答える 3

0

CSS ではできないと思いますが、jQuery を使えばとても簡単にできます。

$(window).scroll(function(){
    if ($(this).scrollTop() > 900) {
        $('#divmenu').fadeIn('slow');
    } else {
        $('#divmenu').fadeOut('slow');
    }
});
于 2013-02-23T10:45:05.917 に答える
0

たぶん、絶対を使用した場合は？

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

もちろん、この方法ではポップアウトするのではなく上にスクロールし、top:920pxそれに応じて親要素に応じて変更する必要があります...それ以外の場合は、Javascript を使用することをお勧めします。

于 2013-02-23T11:13:11.983 に答える
0

@ルイス、これを試してください

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-24T06:49:13.757 に答える