CODEWITHSUNDEEP
jquerycssfullcalendarfixed-header-tables
stackflow
stackflow

Reputation: 2122

Jquery FullCalendar - Fix headers

I'm using Adam Shaw's FullCalendar plugin with resource-view integration. This is how my FullCalendar looks like.

my implementation

I want to fix the highlighted area, So that scrolling all the way to bottom will not hide the staff names.

I just want to make that header scrollable until it touches the top of the browser and stick it there during rest of the scrolling time.

In this manner, even when I'm working with lower part of the calendar I still know the column names corresponding to the staff without scrolling up and down.

Has anyone ever tried this before? Are there any resources for this?

Appreciate any help. Thanks a lot!

Upvotes: 3

Views: 2453

Answers (1)

GoE
GoE

Reputation: 596

you can use the scrollTop() function in jQuery. Like this:

$(document).bind( 'scroll', function() {

        var scroll= $(document).scrollTop();

        if ( scroll >= 150 ) {

            $('#tableheader').css({'position':'fixed'});
            $('#tablebody').css({'marign-top':$('#tableheader').height()+'px'});
        }
});

Upvotes: 2

Related Questions