带左侧滚动目录页面的左下角固定按钮视觉消失但功能正常问题

1. 按钮图标不显示修复 #

按钮内的far fa-star是Font Awesome图标，需确保项目已正确引入Font Awesome资源：

• 下载Font Awesome本地文件，在HTML头部引入其CSS：

<link rel="stylesheet" href="./本地路径/font-awesome/css/all.min.css">

• 检查图标类名是否与使用的Font Awesome版本匹配，比如新版中far对应Regular样式，确认目标图标存在。

2. TOC页面按钮视觉隐藏（保持可点击） #

要实现“有TOC时按钮视觉消失但点击有效”，可通过两种方式实现：

方式一：CSS原生检测（支持:has()选择器的浏览器） #

修改CSS，添加针对TOC页面的按钮样式：

.bottom-left-btn {
  bottom: 5px;
  left: 5px;
  background-color: transparent;
  color: var(--clr-text);
  font-size: 16px;
  border: none;
  cursor: pointer;
  z-index: 10000;
  display: block;
  position: fixed;
  /* 新增备用样式，防止按钮颜色与背景重合导致默认不可见 */
  padding: 8px;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.1);
}

/* 当页面存在.toc元素时，按钮视觉隐藏但保留点击能力 */
body:has(.toc) .bottom-left-btn {
  opacity: 0;
}

.toc {
  padding-left: 10%;
  z-index: 1;
  position: relative;
  ul {
    margin-bottom: 0;
  }
}

方式二：JS检测（兼容所有浏览器） #

通过JS判断页面是否存在TOC，给按钮添加隐藏类：

document.addEventListener("DOMContentLoaded", function () {
    // 原有代码保留
    const hasToc = document.querySelector('.toc') !== null;
    const starButtons = document.querySelectorAll('button.star-button');
    if(hasToc){
        starButtons.forEach(btn => btn.classList.add('toc-hidden'));
    }

    // 原有事件绑定等代码继续执行...
});

对应的CSS新增：

.toc-hidden {
  opacity: 0;
}

3. 补全颜色转换函数 #

当前JS中的hexToHSL和hslToHex为空，会导致颜色选择器功能失效，补全如下：

function hexToHSL(hex) {
  hex = hex.replace(/^#/, '');
  let r = parseInt(hex.substring(0,2),16)/255;
  let g = parseInt(hex.substring(2,4),16)/255;
  let b = parseInt(hex.substring(4,6),16)/255;

  const max = Math.max(r,g,b);
  const min = Math.min(r,g,b);
  let h,s,l = (max+min)/2;

  if(max === min){
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d/(2-max-min) : d/(max+min);
    switch(max){
      case r: h = (g-b)/d + (g < b ? 6 : 0); break;
      case g: h = (b-r)/d + 2; break;
      case b: h = (r-g)/d + 4; break;
    }
    h /= 6;
  }

  h = Math.round(h * 360);
  s = Math.round(s * 100);
  l = Math.round(l * 100);
  return {h, s, l};
}

function hslToHex(h, s, l) {
  s /= 100;
  l /= 100;
  const c = (1 - Math.abs(2*l -1)) * s;
  const x = c * (1 - Math.abs((h/60)%2 -1));
  const m = l - c/2;
  let r,g,b;

  if(h >=0 && h <60){ r=c; g=x; b=0; }
  else if(h >=60 && h <120){ r=x; g=c; b=0; }
  else if(h >=120 && h <180){ r=0; g=c; b=x; }
  else if(h >=180 && h <240){ r=0; g=x; b=c; }
  else if(h >=240 && h <300){ r=x; g=0; b=c; }
  else { r=c; g=0; b=x; }

  r = Math.round((r+m)*255).toString(16).padStart(2,'0');
  g = Math.round((g+m)*255).toString(16).padStart(2,'0');
  b = Math.round((b+m)*255).toString(16).padStart(2,'0');

  return `#${r}${g}${b}`;
}

内容的提问来源于stack exchange，提问作者doodlebob