jquery - 下にスクロールするとテーブルが Fixed になる

Question

これは私が取り組んでいるページの例です: http://tommywebdesigner.com/Vision.html

ページを下にスクロールすると、アイコンの矢印が上に固定されるまで、Title Vision Generalの部分が必要です。それを達成するための最良の方法を教えてもらえますか？

基本的に、ページがdivに来るとクラスが固定される例を見てきました。私の場合は似ているはずですが、この例のようにメニューが固定されていません。

Answer 1

他の例を見て、それを処理する JavaScript を見つけました。彼らはjQueryを使用しています。コードは次のとおりです。長くて申し訳ありません。

/*
 *
 * Fold/unfold header
 *
*/
var snapped = false;
function fixHeader(){
    $('#headercontainer, body').addClass('fixed')
}


function headerUnfold(){
    $("header").animate({
        "height" : 157
    },300, "swing");


    //if header is fixed
    if($('body.fixed').length && !snapped){
        $('#content').animate({
            'margin-top' : 185
        },300, "swing");
    }
    if($('body.fixed').length && snapped){
        $('#submenucontainer').animate({
            'margin-top' : 90
        },300, "swing");
    }


    $("nav, #menu_aux").fadeIn('fast');
    $("#menuback").hide();
    $("header").bind('mouseleave' , function(){
        headerFold(true);
    })
    }

    function headerFold(animate){
    $("header").unbind('mouseleave');
    if(animate){
        time = 300;
    }else{
        time = 0;
    }
    $("header").animate({
        "height" : 65
    },time, "swing")

    //if header is fixed
    if($('body.fixed').length && !snapped){
        $('#content').animate({
            'margin-top' : 80
        },300, "swing");
    }

    if($('body.fixed').length && snapped){
        $('#submenucontainer').animate({
            'margin-top' : 0
        },300, "swing");
    }


    if(animate){
        $("nav, #menu_aux").fadeOut('fast');
    }else{
        $("nav, #menu_aux").hide();
    }

    $("#menuback").css({
        "left" : -10
    }).show().animate({
        "left" : 20
    },time)
    }

    $("#menuback").bind('mouseenter', function(){
    headerUnfold();
    })

id の効果が必要な要素を作成するだけですsubmenucontainer。JS へのより直接的なリンクが必要な場合は、ここにあります。