jquery - 向下滚动时表格变为固定

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 链接，请点击此处。