Question

这是我正在处理的页面示例：http://tommywebdesigner.com/Vision.html

当我向下滚动页面时，我希望标题 Vision General 中的部分直到图标向下箭头固定在顶部。你能告诉我实现这个目标的最佳方法吗？

基本上我看到一个example，当页面到达div时，类会被修复。我的情况应该类似，但没有修改菜单，如example。

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();
    })

只需将要素效果的元素设为submenucontainer即可。如果您想要更直接的链接到JS here it is。

在向下滚动时，表格变为固定

1 个答案: