How can I alter the color of the menu text when scrolling to the top of a webpage?

As I navigate my website, I encounter a menu with a transparent background at the top that changes to black as I scroll down. On a specific page where the background is white, this presents an issue: when the menu reaches the top, the white background clashes with the text, making it unreadable. Is there a way to dynamically change the text color of the menu to black when it's at the top of the page? I have provided an image showcasing the menu in both scenarios. Below is the HTML and script code that controls the menu:

https://i.sstatic.net/f22ra.png

https://i.sstatic.net/2oh8M.png

Here is the HTML & Script:

<!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>

...

This is the CSS used:

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;

}

...
javascriptjqueryhtmlcss

Answer №1

To correctly style the .black class, you need to specify the appropriate colors. Before running the snippet, make sure to click on Expand Snippet as I have tailored it for larger resolutions only. For smaller resolutions (such as mobile devices), you can include the styles within @media(max-width: 786px).

I have inserted 

<div style="height:1500px" class="only-for-scroll"></div>
to enable scrolling.

Within the CSS code snippet provided, I have highlighted the changes by commenting with //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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing this error/bug to show up in Angular?

I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...

javascriptpythonangulartypescript

Working with arrays of multiple checkboxes in jQuery

<input type="checkbox" name="options[]" value="1" /> <input type="checkbox" name="options[]" value="2" /> <input type="checkbox" name="options[]" value="3" /> <input type="checkbox" name="options[]" value="4" /> <input type="chec ...

jqueryarrayscheckbox

Please provide an explanation of how babel and node.js are interconnected within the ReactJS framework

As a beginner in ReactJS, I'm curious about the role of Node.js in the React ecosystem. Can someone please explain its importance to me? ...

javascriptnode.jsreactjs

Automatically determining the optimal quality from various sources tailored to the individual user - jwplayer

Check out the code snippet below: var playerInstance = jwplayer("mySingleVideoWrapper").setup({ image: getCurrentPosterSrc, sources: [ { file: 'file-360.mp4', label: "360p" ...

htmlcssjwplayerjwplayer7

What is the best way to use jQuery to display the character represented by an ASCII code &###?

Struggling with printing text? I am trying to append some content to an array, but it's showing special characters like &aacute; instead of the actual accented letters. Any suggestions on how to fix this issue? This is for a select tag, so I&apos ...

jqueryhtml

Vue component retrieval on the client side

I am attempting to retrieve a component using Vue with cdn in order to dynamically re-render from a public project that contains a file named cash-sale.vue with the .vue extension. <script> export default { data(){ return { "rows&quo ...

htmlvue.js

Adjust the size of the container DIV based on the content within the child DIV

I have been searching for a solution to my question without success. Here is the issue: I have a DIV that acts as a container for a Post in my project. Inside this post are classes for the poster avatar, name, timestamp, text, and more. The problem arise ...

htmlcsssize

Reload the page when the value reaches 1

Hello, I am currently working on creating a system where my index page refreshes when a value in my database is set to 1. However, I am having trouble with the code as only my index.php is not refreshing. index.php <script> interval_timer = setInt ...

javascriptphpajax

I keep encountering the issue where nothing seems to be accessible

I encountered an error while working on a project using React and Typescript. The error message reads: "export 'useTableProps' (reexported as 'useTableProps') was not found in './useTable' (possible exports: useTable)". It ...

javascriptreactjstypescript

Trying to draw a comparison between a text box and an individual element within

I am having some difficulty comparing user-entered text in a textbox with an element in an array. function checkUserInput() { var str = imageArray[randomNumber]; var index = str.indexOf(document.getElementById('textBox').value); ...

javascriptarrays

Create a wait function that utilizes the promise method

I need to wait for the constructor() function, which contains an asynchronous method handled by Promise. My goal is to wait for two asynchronous methods within the constructor, and then wait for the constructor itself. However, my code is throwing an err ...

javascriptjqueryhtml

When I separate the div into its own line in the HTML/CSS code, the behavior changes significantly

I'm encountering an issue with my HTML/CSS structure: .im-wrapper { width: 100%; height: 100%; position: fixed; overflow: hidden auto; top: 0; left: 0; } .im-backdrop { background-color: var(--darkblack); opacity: 80%; width: 1 ...

htmlcssbootstrap-5

Modify the color or background color of a disabled Material UI checkbox

The disabled unchecked checkbox appears too subtle to me, and I would like to enhance it by giving it a grey background and changing the cursor style to not-allowed. I've been trying to implement these styles on the checkbox using the makeStyles, but ...

javascriptcssreactjsmaterial-uimakestyles

What is the process for showing a duplicate image in a dialog box once it has been selected on an HTML page?

I am experiencing an issue where the dialog box is displaying when I use the button tag, but not when I use the image tag. Can someone please assist? <img src='image.png' height='200px' widht='200px' id='1'> ...

javascriptjqueryhtmlimage

Customize the default directory for local node modules installation in node.js using npm

If I prefer not to have my local (per project) packages installed in the node_modules directory, but rather in a directory named sources/node_modules, is there a way to override this like you can with bower? In bower, you specify the location using a .bow ...

javascriptnode.jsnpmbowernpm-install

"Revolutionize real-time data updates with Node.js, Redis, and Socket

Greetings! I am currently working on a project for my school that involves creating a "Twitter clone." My goal is to incorporate a publish subscribe pattern in order to facilitate real-time updates. One key feature users will have access to is the abili ...

javascriptnode.jssocket.ioreal-timepublish-subscribe

Is there a way to append items to the main level of an array?

I am attempting to populate an array with objects in order to achieve the following structure: myobject1: Object: ItemInside: Object myobject2: Object ItemInside: Object myobject3: Object ItemInside: Object myobject4: Object ItemInside: Ob ...

javascriptarrays

ng-class in AngularJS not interacting with Scope method

I am in the process of creating a new application. Here is how my index.html file looks: <html ng-app='myApp'> <body ng-controller='mainController'> <div ng-view> </div> </body> </html> My m ...

javascriptangularjsng-class

Transfer real-time information to MVC controller through AJAX

Is there a way to send live data using an AJAX request to an MVC Controller? Controller: public JsonResult ApplyFilters(dynamic filters){ return null; } The AJAX call: $(':checkbox').click(function (event) { var serviceIds = $('in ...

c#jqueryajaxasp.net-mvcdynamic

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

javascriptjqueryhtmlajax