Git Product home page Git Product logo

Comments (2)

der-robert avatar der-robert commented on August 16, 2024

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");
        }
});

from jquery.timeline.

vovka93 avatar vovka93 commented on August 16, 2024

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");
  }
});

from jquery.timeline.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.