Question

当用户查看 webstie 的不同部分时，我已经设置了在 jquery 中监听滚动并使其字体颜色从白色更改为蓝色。但我的问题是，它也使字体看起来更轻 see here。它不会在浏览器中显示字体粗细的不同变体。我已经尝试在 css 和浏览器中将这个元素的 font-weight 设置为粗体，我也尝试将字体更改为只有一个 font-weight 选项的字体，但它仍然使它更轻。奇怪的是，当我将字体颜色设置为像黄色这样明亮的颜色时，它会正常运行。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="wrap-menu">
            <div class="menu">
                <nav>
                    <ul>
                        <li><a class="scroll-about" id="about">test</a></li>
                        <li><a class="scroll-portfolio" id="portfolio">test</a></li>
                        <li><a class="scroll-contact" id="contact">test</a></li>
                    </ul>
                </nav>
                <div class="menu-logo"></div>
            </div>
        </div>
        <header>
        </header>
        <main>
            <section class="about" id="scroll-about">
            </section>
            <section class="portfolio" id="scroll-portfolio">
            </section>
            <section class="contact" id="scroll-contact">
            </section>
        </main>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="script.js"></script>
</body>
</html>

css

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.menu .blue {
    color: #140689;
}

.menu .blue::after {
    left: 0;
    background-color: #140689;
}

.wrap-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 10vh;
    background-color: rgb(29, 29, 29);
    font-family: verdana, sans-serif;
}

.menu {
    display: flex;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    height: 10vh;
}

.menu nav {
    flex-basis: 65%;
    height: 10vh;
}

.menu ul {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
    align-items: center;
    height: 10vh;
}

.menu li {
    padding-right: 10%;
    text-align: center;
    overflow: hidden;
}

.menu li a {
    display: inline-block;
    position: relative;
    overflow: hidden; 
    text-align: center;
    text-transform: uppercase;
    font-size: 35px;
    flex-basis: 33%;
    cursor: pointer;
    line-height: 150%;
    color: rgb(212, 212, 212);
    text-decoration: none;
    font-weight: bold;
}
nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -100%;
    background-color: rgb(212, 212, 212);
    width: 100%;
    height: 3px;
    transition: 0.3s;
}

.menu nav a:hover::after {
    left: 0%;
}

.menu .menu-logo {
    flex-basis: 25%;
    height: 90%;
}

header {
    margin-top: 10vh;
    height: 90vh;
    background-color: crimson;
}



main .about {
    height: 50vh;
    background-color: cornflowerblue;
}

main .portfolio {
    height: 100vh;
    background-color: brown;
}

main .contact {
    height: 40vh;
    background-color:chocolate;
}

jquery

const navAbout = $('.menu a.scroll-about');
const navPortfolio = $('.menu a.scroll-portfolio');
const navContact = $('.menu a.scroll-contact');
const navAll = $('.menu nav a');

function changeColor() {
    const windowHeight = $(window).height();
    const scrollValue = $(document).scrollTop();
    const aboutHeight = $('section.about').outerHeight(true);
    const portfolioHeight = $('section.portfolio').outerHeight(true);
    const contactHeight = $('section.contact').outerHeight(true);
    const navHeight = $('.wrap-menu').outerHeight(true);
    const headerHeight = $('header').outerHeight(true);


    if(scrollValue > navHeight + headerHeight + aboutHeight + portfolioHeight - windowHeight)  {
        navAll.removeClass('blue');
        navContact.addClass('blue');
    }else if(scrollValue > navHeight + headerHeight + aboutHeight - windowHeight / 2) {
        navAll.removeClass('blue');
        navPortfolio.addClass('blue');
    }else if(scrollValue > navHeight + headerHeight - windowHeight / 2) {
        navAll.removeClass('blue');
        navAbout.addClass('blue');
    }else if(scrollValue < navHeight + headerHeight - windowHeight / 2) {
        navAll.removeClass('blue');
    }

更改字体颜色会更改字体粗细

0 个答案: