用户:39886146/test

Hi ~ o(*￣▽￣*)ブ

这是个临时demo，但是已经提现了主要的设计思路。

在足够显示目录时左侧悬浮显示。不够的时候左侧隐藏，鼠标悬浮显示。

如需实装，可以做成模板，也可以直接加入CSS。

目录过长时跟随

下方js代码可以在页面滚动时，高亮当前章节的标题。

var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('.scroll-activate { font-weight:blod;font-size:130%;color:black !important;}');

var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
var prevHeading = null;

window.onscroll = function() {
  var currentHeading = Array.from(headings).find(heading => {
    var rect = heading.getBoundingClientRect();
    return rect.top <= window.innerHeight /2 && rect.bottom >= window.innerHeight /2;
  });


  if (currentHeading) {
    var currentSubHeading = currentHeading.querySelector('.mw-headline');
    if (currentSubHeading) {
      var currentSubHeadingId = currentSubHeading.id;
      console.log(currentSubHeadingId);
      // 在此处进行其他操作，例如将id显示在页面的某个位置

      // 如果有上一个章节标题，则将其加粗的目标元素的样式还原为正常样式
      if (prevHeading) {
        var prevSubHeadingId = prevHeading.querySelector('.mw-headline').id;
        var prevLink = document.querySelector(`#toc a[href="#${prevSubHeadingId}"]`);
        if (prevLink) {
          prevLink.classList.remove('scroll-activate');
        }
      }

      // 将当前章节标题的子标题加粗显示
      var currentLink = document.querySelector(`#toc a[href="#${currentSubHeadingId}"]`);
      if (currentLink) {
        currentLink.classList.add('scroll-activate');
		currentLink.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }

      // 将当前章节标题设置为上一个章节标题，以备下一次滚动时使用
      prevHeading = currentHeading;
    }
  }
};

标题1

标题1-1标题1-1标题1-1标题1-1标题1-1标题1-1标题1-1

页面内容

标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2

页面内容

标题3

页面内容

标题4

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容

标题n

页面内容