Question

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

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

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

}

Answer 1

您需要为.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>

在网站顶部

1 个答案: