将 vis.js 时间轴上的标题修复到页面

Question

图表本身中的库fixes headers now 很棒，但对我们来说它已经完成了一半。

因为很难自定义标题，所以我添加了一个专门构建的行来包含当月的一些数字。 大时间轴垂直滚动很痛苦，所以我们的用户更喜欢可以滚动的大 HTML 页面，但这当然否定了内置的固定标题。

我一直在探索代码来浮动页面上的原始标题或我的内容，允许页面滚动，但我的 CSS 不是那么强大。我已成功使用this technique 进行基本报告，但我不确定它是否适合将时间线横向移动

任何指示、想法、建议？

Answer 1

我通过识别一组框并将它们定位：固定在相关条件下解决了这个问题，即向下滚动。我看到了一个类似的解决方案，用于修复滚动报告的标题。

最后一行感觉有点脏，但它可以工作（未提供 fn）。

   offset_applied = false; // remember if offset applied
   $boxes = $('#p71_timeline .foreground div.group .topbox');

  // when scrolling the page, run this
  $( document ).scroll(function() {
    // if scrolling past where we need to start hovering months, then hover them
    if ($(document).scrollTop() > 200) {
       $boxes
          .css(
            {'position':'fixed'  // float month boxes by setting position fixed
            ,'z-index':100       // ensure hover over everything
            ,'top':'44px'        // float below the menu
        });
        // this makes floating boxes a little neater
        $('#shade,#shade_left').show(); 
        // shade_left added to lighten extra months shown when hovering.

      if (!offset_applied) {
        // the first time we need to shift all boxes by an offset probably dependent by y-axis label widths.
        apex.debug('shift right');
        $boxes.css('left','+=247px');
      }
      // only need to do it once, otherwise it quickly zooms to right.
      offset_applied = true;
    }
    else {
      // page scrolled back up to the top, try leave it as we found it
      $boxes.css({'position':'absolute','top':'5px'});
      $('#shade,#shade_left').hide(); 
      if (offset_applied){
        // only need to reverse the offset once
        apex.debug('shift left');
        $boxes.css('left','-=247px');
      }
      offset_applied = false;

    } // scroll position

  });
  // After giving the chart time to render, check box placement.
  // If the page is scrolled down on page load then this needs reapplying.
  setTimeout(function(){_check_placement();}, 1000);

我还渲染了一个具有部分不透明度的区域，以便在框悬停时放置在下方 (#shade)，只是为了整理它。