ぬえさぶろうのAnimate放送部

解説

キーワード	使い方
scrollTop()	要素のスクロール位置を取得 ブラウザのスクロール時の要素の位置を取得します。$(window)でセレクタにブラウザを指定することが出来ます。
animate()	アニメーション 引数で指定したCSSスタイルまで段階的に変化させることによって、要素をアニメーションさせます。
stop()	アニメーションの中止 要素のアニメーションが実行中である場合、中止します。

コンテンツのつくりかた

• 絶対配置でナビゲーションの位置を決める
• scroll()メソッドを使ってスクロール時に処理を実行する
• ナビゲーションを定位置に表示するのに必要な計算式を考える

HTML

ここには、HTMLのコードを入れる

/*フローティングメニュー*/
<div id="floating_menu_display">
    <ul>
        <li><a href="#">動くロゴ</a></li>
        <li><a href="#">ActionScript3.0の使い方</a></li>
        <li><a href="#">キャラクターアニメーション</a></li>
        <li><a href="#">ホワイトボードアニメーション</a></li>
    </ul>
<!--/.floating_menu_display--></div>

CSS

ここには、CSSのコードを入れる

/*フローティングメニュー*/
#floating_menu_display{
    position:absolute;
    top:100px;
    left:50px;
}
#floating_menu_display ul{
    width:250px;
}
#floating_menu_display li{
    width:250px;
    height:auto;
    background:#0A3956;
    border-bottom:1px solid #E5DECA;
}
#floating_menu_display li a{
    display:block;
    color:#E5DECA;
    padding:0.5em;
}

JS

ここには、JSのコードを入れる

//floating_menu
$(function(){
    $(window).scroll(function(){
        //スクロール時の処理
        $("#floating_menu_display").stop().animate({"top" : $(window).scrollTop() + 100},500);
    });
});