Adjusting the header background color and inserting a logo once a specific threshold is reached

Currently, I am designing a website where I need the background color to transition from transparent to black and display a logo once the user scrolls down to a certain point. I am a beginner in javascript and I am facing some difficulties with this task.

For reference, here is an example:

Although I have managed to change the background color, I am struggling to show the image as well. I have tried various solutions found online, but none seem to work for me.

Could someone please assist me with this issue?

HTML:

<body>
    <img src="pictures/placeholder1.jpg" id="first_image">
    <header>
        <img src="pictures/logo.png">
        <nav>
            <ul>
                <li><a href="#">PRODUCTS</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">OUR TEAM</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>
    <main>


    </main>

CSS:

header {
    width: 100%;
    height: 20%;
    font-weight: bold;
    position: fixed;
    font-size: 14px;
    z-index: 100;
    background-color: transparent;
}

header img {
    float: left;
    margin-left: 15%;
    height: 80%;
    margin-top: 5px;
    display: none;
}

#first_image {
    width: 100%;
    min-width: 1024px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
}

Javascript (jQuery):

$(document).ready(function(){
    $(window).scroll(function() { 
        if ($(document).scrollTop() > 600) {
            $("#header").css("background-color", "black");
        } else {
            $("#header").css("background-color", "transparent");
        }
    });
});

Answer №1

$(window).scroll(function() {
  if ($(this).scrollTop() > 600) {
    $("header").css("background", "black");
    $("header img").css('visibility','visible');
  } else {
    $("header").css("background", "transparent");
    $("header img").css('visibility','hidden');
  }
});

https://jsfiddle.net/Thielicious/jykvt19k/

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

Complex recurrent operation

Can anyone assist me in solving this complex loop? I need to call 5 API URLs, each a specific number of times before moving on to the next URL in sequence and then starting over again. https://www.example1.com should be called 4 times https://www.example2 ...

Unable to loop through the "dataList" retrieved from a service call to the java backend within an Angular 9 application

After receiving JSON data from a Java backend service called houseguidelines, the information is sent to an Angular application via a service call. I am attempting to iterate over this returned JSON data and add it to an array I have created. Unfortunately ...

The skybox in Three.js appears to be malfunctioning following a camera rotation

Working with JavaScript, I am attempting to build a basic skybox inspired by this demo. Everything is going smoothly except for one issue - when I rotate the camera (using orbitControls.js) and the z value is not at its minimum, the textures start to glitc ...

Displaying JSON data received from an AJAX request on the screen

Our server is located in Europe. Occasionally, a user based in America reports an issue when using the $.getJSON function. Instead of passing the JSON response to JavaScript, the user's browser simply displays it. The AJAX call appears as follows: ...

Ways to avoid encoding Unicode characters in JavaScript programming

When I retrieve data from an API, I receive a STRING like this: [ { "reason": "Invalid address", "email": "j\u00c3\u00a9r\u00c3\u00b4mel\u00c3\u00a4ufer@com" }, { "reason": "Invalid address", "email": ...

Load the audio file, pause it, and begin playing it after a few seconds have passed

After 8 seconds, I want to use setTimeout to play an audio file: setTimeout(function() { document.getElementById('delayed_play').style.display = 'block'; }, 8 * 1000); <div id="delayed_play"> The issue is that ...

Tips for Using Threejs Loaders in a React App

Greetings and thank you for taking the time to read my question. ...

Click on a designated button to choose a specific file on an HTML page

I need to be able to select a specific file by clicking on another button. A helpful solution that utilizes JavaScript to trigger the selection of a hidden file can be found in this answer. You can view the implementation here. In my scenario, I alre ...

Solving data within an Angular Controller

Recently delving into Angular development, I've found myself caught in a loop trying to solve this particular issue. To give some context, I'm utilizing the MEAN stack through mean.io which includes Angular UI Router functionalities. In my data ...

Modifying text size using JavaScript string manipulation

I'm currently experimenting with a countdown script, but I'm struggling to change the size of the numbers displayed. Can anyone help me find where I can adjust the font and font size in this script? var eventdate = new Date("February 20, 2014 11 ...

Difficulty dealing with Firestore using get() followed by add()

Recently started learning Vue.js and Firestore, facing a challenge with what should be a simple task. 1) I am trying to fetch default values from an existing template document in my Firestore database. 2) The goal is to use these default values to create ...

Encountering a 405 error when attempting to send a request through an express route in a Next

After deploying my Express js routes in Next js on hosting, I encountered an error 405 when sending requests to the route. However, everything works fine when I test it on localhost. I'm puzzled by this issue. Can anyone help me understand what' ...

Dynamic Color Transformation of Threejs Vehicles during Execution

I have been experimenting with the Threejs cars example found at the following URL: It's a great way to test realistic objects. I was trying to change the materials for the car on runtime, but I hit a roadblock due to the way the mesh is being added ...

What is the method to generate an array of values using a single attribute in GeoJSON data?

Note: After reviewing some possible solutions mentioned in this thread, I found that .map is the perfect fit for what I need, which was not covered in the original post. Thomas's response below addresses my specific requirement. In JavaScript, how ca ...

Combining two observable entities

Utilizing Angular 4 and rxjs, the objective is to fetch data from two distinct servers in JSON format, merge this data, and exhibit it in a list by associating the list with an observable array. **Word Search Component TypeScript File:** @Component( ...

Ensure that the height of the div element is equal to 100% of

I've been trying to figure out how to make my div take up all of the vertical height of the screen, but I haven't found a simple solution in the 100% div height discussions. Can anyone help? Here's my code: CSS #mother { width: 100%; ...

Making a POST request to a REST service in Rails 3 using Phonegap

I've encountered an issue with my rails3 rest service while developing a phonegap app using HTML5 and jQuery javascript. Specifically, I'm struggling to make a POST rest call with ajax jQuery due to cross domain security restrictions. Does anyon ...

The selected image should change its border color, while clicking on another image within the same div should deselect the previous image

https://i.sstatic.net/jp2VF.png I could really use some assistance! I've been working on Angular8 and I came across an image that shows how all the div elements are being selected when clicking on an image. Instead of just removing the border effect f ...

Enhancing Animation Speed with jQuery

I've provided the code snippet at this link: http://jsfiddle.net/LnWRL/4/: Here is the HTML: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <div id="wrap_demo"> <div id="demo"></di ...

Display Ajax content once all of the content has been successfully loaded

I'm encountering an issue with a script on my WordPress page. I've modified the navigation so that when clicked, the content fades out, a spinner appears, and then new posts are loaded using jQuery.load, followed by the content fading back in. H ...