Table becomes Fixed on scroll down

Question

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

I want the part from the Title Vision General till the icon arrow down 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 example 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 example.

This will have to be done using Javascript and the CSS property `position:fixed;` — Glenn Dayton, Aug 23 '12 at 23:33

score 0 · Accepted Answer · answered Aug 23 '12 at 23:39

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 here it is.

i have followed this example : http://jqueryfordesigners.com/fixed-floating-elements/ and it worked for me. — Koala7, Aug 24 '12 at 07:35
The request has changed , i made an other question here http://stackoverflow.com/questions/12109677/create-a-table-position-fixed-inside-a-div-collapse — Koala7, Aug 24 '12 at 12:48

Table becomes Fixed on scroll down

1 Answers1