Угловая кнопка исчезает на прокручиваемых страницах

Кнопка расположена в самом нижнем левом углу, и когда я перехожу на страницу моего сайта с оглавлением (слева), кнопка визуально исчезает, но все еще работает. Кнопка по сути просто меняет цвет части текста на моем сайте.

.

как вы можете видеть, значок не отображается, мое оглавление длинное и позволяет прокручивать левую часть страницы.

вот часть моего кода:

HTML:

    <button class = "bottom-left-btn star-button"><i class = "far fa-star"></i></button>

CSS:

.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;
}

.toc {
  padding-left: 10%;
  z-index: 1; /* Ensure TOC has a lower z-index */
  position: relative; /* Ensure positioning context */
  ul {
    margin-bottom: 0; /* Remove bottom margin from nested sublists */
  }
}

ЯС:

document.addEventListener("DOMContentLoaded", function () {
    const starButtons = document.querySelectorAll('button.star-button');

    // Initialize jscolor picker
    let picker = null;

    jscolor.presets.default = {
        width: 200,
        position: 'right',
        backgroundColor: '#333',
        controlBorderColor: '#FFF',
        shadow: true,
        borderRadius: 6,
        borderWidth: 1,
        borderColor: '#444',
        previewElement: null,
        palette: [
            '#7092be', '#4040bf', '#ab548a', '#bf404c', '#b5a940', '#3fa687'
        ],
    };

    // Get the saved color from localStorage or set a default lightness
    const savedColor = localStorage.getItem('selectedColor');
    const cssHsl = getCssHsl('--clr-a-text');
    const initialHsl = savedColor ? JSON.parse(savedColor) : { ...cssHsl, l: 50 }; // Default lightness to 50%
    const hexColor = savedColor ? hslToHex(initialHsl.h, initialHsl.s, initialHsl.l) : hslToHex(cssHsl.h, cssHsl.s, 50); // Use CSS hue and saturation, default lightness to 50%

    function showColorPicker(e) {
        e.preventDefault();
        e.stopPropagation();
        const target = e.currentTarget.querySelector('i');

        if (!picker) {
            picker = new jscolor(target, {
                onInput: 'updateColor(this)',
                valueElement: null, // This ensures that the color value is not applied to the button itself
                previewElement: null, // No preview element
                value: hexColor // Set the initial color
            });
        }

        if (picker) picker.show();
    }

    if (starButtons.length > 0) {
        starButtons.forEach(button => {
            button.addEventListener('click', showColorPicker);
            button.addEventListener('touchstart', showColorPicker); // Add touchstart event listener for mobile
            const greenPart = button.querySelector('.green-part');
            if (greenPart) {
                greenPart.addEventListener('click', handleGreenPartClick);
                greenPart.addEventListener('touchstart', handleGreenPartClick); // Add touchstart event listener for mobile
            }
            console.info('Star button event listener added');
        });
    } else {
        console.info('No star buttons found');
    }

    function handleGreenPartClick(e) {
        e.preventDefault();
        e.stopPropagation();
        alert('Green part clicked!');
    }

    // Apply the saved color on page load
    if (savedColor) {
        const hslColor = JSON.parse(savedColor);
        applyColor(hslColor);
        console.info('Applied saved color:', hslColor);
    }
});

function updateColor(picker) {
    const hexColor = picker.toHEXString();
    const hslColor = hexToHSL(hexColor);

    console.info('New color selected: ', hslColor);

    applyColor(hslColor);
    // Save the selected color to localStorage
    localStorage.setItem('selectedColor', JSON.stringify(hslColor));
}

function applyColor(hslColor) {
    document.documentElement.style.setProperty('--clr-a-text', `hsl(${hslColor.h}, ${hslColor.s}%, var(--L-a-text))`);
    document.documentElement.style.setProperty('--clr-a-text-hvr', `hsl(${hslColor.h}, ${hslColor.s}%, calc(var(--L-a-text) * var(--L-a-text-hover-change)))`);
}

function hexToHSL(hex) {
 
}

function hslToHex(h, s, l) {
 
}

function getCssHsl(variable) {
    const style = getComputedStyle(document.documentElement);
    const value = style.getPropertyValue(variable);
    const hsl = value.match(/\d+/g).map(Number);
    return { h: hsl[0], s: hsl[1], l: hsl[2] };
}