滚动到一定的屏幕高度百分比时隐藏特定的元素js代码

例如：当网页滚动超过屏幕高度-某个值时，id="d-more"的div自动隐藏，滚动回去则恢复显示

<script>
    // 将 vh 单位转换为像素值的函数
    function vhToPixels(vh) {
        // 将视口高度乘以 vh 百分比，得到像素值
        return window.innerHeight * (vh / 100);
    }

    // 设置阈值，以 vh 为单位，滚动这个vh时就隐藏
    const thresholdVh = 50; // 根据需要调整此值
    // 将阈值从 vh 转换为像素值
    const thresholdPx = vhToPixels(thresholdVh);

    function checkScroll() {
        // 获取 id 为 'd-more' 的元素
        const dMore = document.getElementById('d-more');
        // 获取当前的垂直滚动位置
        const scrollTop = window.scrollY || document.documentElement.scrollTop;

        // 检查滚动位置是否超过阈值
        if (scrollTop > window.innerHeight - thresholdPx) {
            // 如果超出阈值，则隐藏元素
            dMore.style.display = 'none';
        } else {
            // 如果未超出阈值，则显示元素
            dMore.style.display = 'block';
        }
    }

    // 添加滚动事件监听器，检测滚动位置
    window.addEventListener('scroll', checkScroll);
    // 页面加载时进行初始检查，以处理可能存在的滚动位置
    checkScroll();
</script>