时间戳

首页 > 解决方案 > 有没有办法在网站顶部更改菜单文本颜色

javascript - 有没有办法在网站顶部更改菜单文本颜色

问题描述

我使用的菜单有一个顶部透明的背景，当您向下滚动时，菜单的背景颜色会变为黑色。在我的一个页面中，整个网站的背景是白色的，所以当用户滚动到顶部时，菜单背景是白色的，这使得无法阅读菜单文本。

我想知道是否有代码可以在菜单栏位于网站顶部时更改菜单文本的颜色，菜单文本变为黑色，因此可读。这是菜单栏位于网站顶部而不是顶部时的图片。我将添加为菜单栏编码的代码。

网站顶部

在此处输入图像描述

HTML & 脚本：

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Croydon Cycles</title>
      <link rel="stylesheet" href="shop-style.css">
      <link rel="shortcut icon" type="image/png" href="images/favicon.png">
      <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="parallax.min.js"></script>
</head>




<body>
    <div class="wrapper">
        <header>

                <nav>

                    <div class="menu-icon">
                            <i class="fa fa-bars fa-2x"></i>
                    </div>

                    <div class="logo">
                            Croydon Cycles
                    </div>

                    <div class="menu">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="location.html">Location</a></li>
                                <li><a href="shop.html">Shop</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                    </div>
                </nav>

        </header>


    <script type="text/javascript">

    // Menu-toggle button

    $(document).ready(function() {
    $(".menu-icon").on("click", function() {
            $("nav ul").toggleClass("showing");
    });
    // add this instruction !
    setTimeout(function() {plusSlides(1) }, 1000)
})

    // Scrolling Effect

    $(window).on("scroll", function() {
        if($(window).scrollTop()) {
                $('nav').addClass('black');
        }

        else {
                $('nav').removeClass('black');
        }
    })


    </script>

</body>
</html>

CSS：

html, body {

    margin: 0;
    padding: 0;
    width: 100%;
    font-family: verdana,sans-serif;
    margin: 0;
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
    box-sizing: border-box;

}



header {
    width: 100%;
    height: 60px;
    background: url(hero.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}


.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
    z-index:2;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 786px) {

    .logo {
          position: fixed;
          top: 0;
          margin-top: 16px;
    }

    nav ul {
          max-height: 0px;
          background: #000;
    }

    nav.black ul {
          background: #000;
    }

    .showing {
          max-height: 34em;
    }

    nav ul li {
          box-sizing: border-box;
          width: 100%;
          padding: 24px;
          text-align: center;
    }

    .menu-icon {
          display: block;
    }

}

标签： javascriptjqueryhtmlcss

解决方案

您需要为.black班级添加正确的颜色。在运行片段之前单击并展开片段，因为我只为大分辨率添加，您可以@media(max-width: 786px)为小分辨率（移动设备）添加。

我添加<div style="height:1500px" class="only-for-scroll"></div>了强制滚动。

我//add this向您发表了评论，确定了我所做的更改。

html, body {

    margin: 0;
    padding: 0;
    width: 100%;
    font-family: verdana,sans-serif;
    margin: 0;
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
    box-sizing: border-box;

}



header {
    width: 100%;
    height: 60px;
    background: url(hero.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}
/*add this lines*/
nav.black .logo {
  color: #fff;
}
nav.black ul li a {
 color: #fff;
}
/*END*/


nav .logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #000; 
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}


nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
    z-index:2;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #000;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>

<body>
    <div class="wrapper">
        <header>

                <nav>

                    <div class="menu-icon">
                            <i class="fa fa-bars fa-2x"></i>
                    </div>

                    <div class="logo">
                            Croydon Cycles
                    </div>

                    <div class="menu">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="location.html">Location</a></li>
                                <li><a href="shop.html">Shop</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                    </div>
                </nav>

        </header>
        
        <div style="height:1500px" class="only-for-scroll"></div>


<script type="text/javascript">

    // Menu-toggle button

    $(document).ready(function() {
    $(".menu-icon").on("click", function() {
       $("nav ul").toggleClass("showing");
    });
    // add this instruction !
    //setTimeout(function() {plusSlides(1) }, 1000)
})

    // Scrolling Effect

    $(window).on("scroll", function() {
    
        if($(window).scrollTop()) {
             $('nav').addClass('black');

        }

        else {
             $('nav').removeClass('black');
        }
    })


</script>

推荐阅读