Open grigorijski opened 2 years ago
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");
}
});
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");
}
});
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!