如何解决document.URL.includes()处理首页元素显隐的初始加载失效问题？

我需要根据当前页面URL调整页面元素：实现一个低透明度全屏div，让背景可见，但要隐藏页面其他元素避免透过该div显示。

我写了一段JS代码，点击导航按钮时，如果URL包含index.html就隐藏discover、titles、hero元素并显示导航菜单，反之恢复。但初始加载根URL（不含index.html）时功能失效。

另外我考虑过修改全屏div背景并添加线性渐变，觉得这可能是更优方案，想咨询这类技术的使用建议。

附上当前代码：

// NAV MENU

const menuBtn = document.querySelector('.navbar-menu__btn');
const navMenu = document.querySelector('.navbar-menu');
const discover = document.querySelector('#discover');
const titles = document.querySelector('.titles');
const hero = document.querySelector('#hero');
let menuOpen = false;

menuBtn.addEventListener('click', () => {
    if(!menuOpen) {
        if (document.URL.includes('index.html')) {
            discover.style.display = 'none';
            titles.style.display = 'none';
            hero.style.display = 'none';
        }
        menuBtn.classList.add('open');
        navMenu.style.display = 'flex';
        navMenu.style.visibility = 'visible';
        menuOpen = true;
    } else {
        if (document.URL.includes('index.html')) {
            discover.style.display = 'inline-block';
            titles.style.display = 'inline-block';
            hero.style.display = 'inline-block';
        }
        menuBtn.classList.remove('open');
        navMenu.style.display = 'none';
        navMenu.style.visibility = 'hidden';
        menuOpen = false;
    }
});

一、修复URL判断失效问题 #

根URL（比如https://example.com/）其实还是指向index.html，只是浏览器自动省略了文件名。咱们可以换个判断逻辑，直接检测当前页面是不是首页，而不是只看URL里有没有index.html：

优化后的JS代码 #

// NAV MENU

const menuBtn = document.querySelector('.navbar-menu__btn');
const navMenu = document.querySelector('.navbar-menu');
const discover = document.querySelector('#discover');
const titles = document.querySelector('.titles');
const hero = document.querySelector('#hero');
let menuOpen = false;

// 判断是否为首页的函数
function isHomePage() {
    const pathname = window.location.pathname;
    // 匹配根路径或包含index.html的路径
    return pathname === '/' || pathname.includes('index.html');
}

menuBtn.addEventListener('click', () => {
    if(!menuOpen) {
        if (isHomePage()) {
            discover.style.display = 'none';
            titles.style.display = 'none';
            hero.style.display = 'none';
        }
        menuBtn.classList.add('open');
        navMenu.style.display = 'flex';
        navMenu.style.visibility = 'visible';
        menuOpen = true;
    } else {
        if (isHomePage()) {
            discover.style.display = 'inline-block';
            titles.style.display = 'inline-block';
            hero.style.display = 'inline-block';
        }
        menuBtn.classList.remove('open');
        navMenu.style.display = 'none';
        navMenu.style.visibility = 'hidden';
        menuOpen = false;
    }
});

说明 #

• 用window.location.pathname获取路径，避免URL里的其他参数干扰判断
• 同时匹配根路径/和包含index.html的路径，覆盖首页的两种访问形式

二、全屏遮罩+渐变背景的优化方案 #

直接隐藏页面元素的方式不够灵活，用全屏遮罩层来实现视觉隔离是更好的思路——遮罩层半透明，能看到背景，但页面内容会被遮罩挡住，不用一个个隐藏元素。具体实现步骤如下：

1. 先在HTML中添加遮罩层 #

<div class="fullscreen-overlay"></div>

2. 编写CSS样式 #

.fullscreen-overlay {
    /* 全屏覆盖整个视口 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 半透明渐变背景：从深灰到浅灰 */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    /* 默认状态隐藏 */
    display: none;
    /* 层级要高于页面普通内容，但低于导航菜单 */
    z-index: 99;
}

/* 导航菜单层级必须高于遮罩，才能正常显示在上面 */
.navbar-menu {
    z-index: 100;
    /* 保留你原有的其他样式 */
}

3. 修改JS逻辑 #

不需要再单独隐藏页面元素，只需切换遮罩层和导航菜单的显示状态：

// NAV MENU

const menuBtn = document.querySelector('.navbar-menu__btn');
const navMenu = document.querySelector('.navbar-menu');
const overlay = document.querySelector('.fullscreen-overlay');
let menuOpen = false;

// 判断是否为首页的函数保留
function isHomePage() {
    const pathname = window.location.pathname;
    return pathname === '/' || pathname.includes('index.html');
}

menuBtn.addEventListener('click', () => {
    if(!menuOpen) {
        // 只有首页才显示遮罩
        if (isHomePage()) {
            overlay.style.display = 'block';
        }
        menuBtn.classList.add('open');
        navMenu.style.display = 'flex';
        navMenu.style.visibility = 'visible';
        menuOpen = true;
    } else {
        if (isHomePage()) {
            overlay.style.display = 'none';
        }
        menuBtn.classList.remove('open');
        navMenu.style.display = 'none';
        navMenu.style.visibility = 'hidden';
        menuOpen = false;
    }
});

技术使用建议 #

• 渐变背景调整：可以修改rgba里的透明度值（第四个参数）来控制遮罩深浅，渐变方向也能改，比如linear-gradient(to bottom right, ...)就能实现斜向渐变
• 性能优化：固定定位的遮罩层不会触发页面重排，比频繁修改多个元素的display属性更高效
• 交互升级：可以给遮罩层加过渡动画，比如加一句transition: opacity 0.3s ease，让遮罩显示/隐藏更顺滑；还能给遮罩加点击事件，点击遮罩就关闭菜单
• 兼容性：linear-gradient和rgba在现代浏览器都支持，不用额外做兼容处理

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