Possibility to make header ruler sticky

[grigorijski]

Is it possible to make header with dates stick to the top during scrolling the timeline down? So dates matching the row are always visible

Thank you!

[der-robert]

Sticky Header + horizontal scrolling, just adjust the values (365 if you have a sidebar) and the 60px if jou have a top navigation bar.

Just quick and dirty :-)

$('.jqtl-container').on('scroll',function() {
        let leftpx = (this.scrollLeft - 356)*-1;
        $(".is_fixed").css({
            left: leftpx+'px'
        });
});

$(window).on('scroll',function(){
        let el = $('.jqtl-ruler-top');
        if ($(this).scrollTop() > 200 && !el.hasClass("is_fixed")){
            el.css({ 'position': 'fixed', 'top': '60px' }).addClass("is_fixed");
        }
        if ($(this).scrollTop() < 200 && el.hasClass("is_fixed")){
            el.css({ 'position': 'static', 'top': '0px' }).removeClass("is_fixed");
        }
});

[vovka93]

Working for me

$('.jqtl-container').on('scroll', function () {
  if ($('.jqtl-ruler-top').hasClass("is_fixed")) {
    $(".is_fixed").css({ left: ($('.jqtl-main').position().left + 1) + 'px' });
  }
});
$(window).on('scroll', function () {
  let el = $('.jqtl-ruler-top');
  let offset = 160;
  if ($(this).scrollTop() > offset && !el.hasClass("is_fixed")) {
    $('.jqtl-main').css({ 'padding-top': el.outerHeight() });
    el.css({ 'position': 'fixed', 'top': '0px', left: ($('.jqtl-main').position().left + 1) + 'px' }).addClass("is_fixed");
  }
  if ($(this).scrollTop() < offset && el.hasClass("is_fixed")) {
    $('.jqtl-main').css({ 'padding-top': 0 });
    el.css({ 'position': 'static', 'top': '0px' }).removeClass("is_fixed");
  }
});