La tabla se vuelve fija al desplazarse hacia abajo

This is the page example I am working on : http://tommywebdesigner.com/Vision.html

I want the part from the Title Vision General hasta el icono de flecha hacia abajo gets fixed on the top when I scroll down the page. Can you tell me the best method to achieve that?

Basically I have seen an ejemplo where the class becomes fixed when the page comes to the div. My case should be similar but without the menu fixed as in this ejemplo.

preguntado el 24 de agosto de 12 a las 00:08

This will have to be done using Javascript and the CSS property position:fixed; -

1 Respuestas

From taking a look at the other examples I've located the javascript that takes care of that for you. They use jQuery. Here is the code, Sorry it's long:

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

Just make the element that you want the effect for id submenucontainer. If you want a more direct link to the JS aquí está.

Respondido 24 ago 12, 00:08

i have followed this example : jqueryfordesigners.com/elementos-flotantes-fijos Y funcionó para mí. - Koala7

The request has changed , i made an other question here stackoverflow.com/questions/12109677/… - Koala7

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.