Using JavaScript and jQuery to replace an image when scrolling

I have a website menu that functions similar to this example: https://jsfiddle.net/sinky/XYGRW/ (found here on stackoverflow)

My query is that the designer would like the logo in the navigation bar (home button) to be replaced with a smaller icon. Not just resizing, but actually changing the image. Can I utilize the scroll event I am already using for other addClass commands to change the img src?

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header').removeClass('tiny');
        $('#menu-spacing').addClass('nav-margin-top');
    } else {
        $('#header').addClass('tiny');
        $('#menu-spacing').removeClass('nav-margin-top')
    }
}); 

HTML
<div id="header" class="header fixed">    
    <div class="contain-to-grid">
            <nav class="row top-bar">
                <ul class="title-area">
                    <li><img src="img/resolute_logo.png" width="195" height="103" alt=""/>    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
                </ul>
                <div id="menu-spacing" class="hide-for-medium-down nav-margin-top">
javascriptjqueryhtmlcss

Answer №1

Of course:

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header').removeClass('tiny');
        $('#menu-spacing').addClass('nav-margin-top');
        $('.title-area img').attr('src', 'img/resolute_logo.png');
    } else {
        $('#header').addClass('tiny');
        $('#menu-spacing').removeClass('nav-margin-top');
        $('.title-area img').attr('src', 'your-new-image.png');
    }
});

reference: http://api.jquery.com/attr/

Answer №2

Have you considered incorporating the images directly into your CSS?

.header.small {
    height:40px;
    background-image: url(...);
}

The remaining code can remain unchanged.

You can view an example on jsfiddle

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

Sticky sidebar navigation paired with a scrollable main content area and anchor links

Examining the fiddle reveals a straightforward page layout with a fixed menu on the left and scrollable content. I am looking to align the menu with the content without any blank space at the top that causes the menu to shift upwards while scrolling down. ...

jqueryhtmlcss

Adding information to a designated included component (Angular)

I am trying to develop a directive for generating multiple choice activities. The concept is that within my scope, I hold a model containing an array of questions structured like this: function Controller($scope) { $scope.activity1 = { "questions" ...

jqueryangularjsangularjs-directive

Rescuing a nested window results in the salvation of the main window (JavaScript)

I'm currently working on a Javascript code that generates a "save-friendly" version of a webpage. child = window.open("","child");<br> child.document.write(htmlPage); The "htmlPage" consists of the basic HTML content of the page witho ...

javascriptinternet-explorerfilesavewindow.open

In ASP.NET, it is possible to only select a single checkbox at a time within a row in a GridView

I have a project where checkboxes are generated dynamically at runtime. I want users to be able to select only one checkbox at a time in each row. Here is my Gridview: <cc1:Grid ID="GrdWorkingCompany" runat="server" OnRowDataBound="GrdWorkingCompany_Ro ...

javascriptc#asp.net

Error in D3: The property "age" is not defined

Currently, I am in the process of developing a force-directed graph using D3 for visualization. One of the challenges I encountered was implementing an age filter utilizing radio buttons on my HTML page and incorporating data from an imported JSON file. T ...

javascriptarraysjsond3.jsradio-button

Creating a persistent toolbar in Vuetify: Tips and tricks

Within my Vuetify app, I've implemented a toolbar: <v-toolbar dark color="primary"> <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon> <v-toolbar-title>{{drawer.title}}</v-toolb ...

javascriptvue.jsvuejs2vuetify.js

What steps should I take when dealing with two dynamic variables in a mediator script within the WSO2 ESB?

I'm facing an issue with my if condition - it doesn't work properly when the value is static. However, when I make `annee2` and `annee1` static (for example =2019), it works fine. Here's the code snippet: <script language="js"&g ...

javascriptwso2wso2-esbwso2-enterprise-integratorwso2-micro-integrator

Converting arrays in a JSON file into HTML formatting

After going through several questions on Stack Overflow, I haven't found a solution for my specific issue. Other questions seem to focus on formatting data from complete JSON files, while my question is about formatting elements of an array parsed fro ...

javascripthtmlarraysjson

Real-time Calculation and Validation of Input Field Totals Using JQuery with Modulus % Rules

Hello, I need assistance with validating my input fields to accept values that are divisible by certain numbers. The criteria are as follows: inputValue % 10 == 0; inputValue % 20 == 0; inputValue % 50 == 0; inputValue % 100 == 0; inputValue % 200 == 0; ...

javascriptjqueryhtml

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

Tips for implementing WebSockets with Play Framework

I recently downloaded Play Framework from GitHub and successfully compiled it. My goal now is to implement WebSockets using a JavaScript client along with a WebSocket controller similar to the one outlined in the Using WebSockets documentation. However, de ...

javajavascriptplayframeworkwebsocket

What is the importance of accessing the session object prior to the saving and setting of a cookie by Express-Session?

Quick Summary: Why is it crucial to access the session object? app.use((req, res, next) => { req.session.init = "init"; next(); }); ...in the app.js file after implementing the session middleware for it to properly function? Neglecti ...

javascriptnode.jsexpress

Tips for distinguishing individual rows within a table that includes rowspans?

My Vue application calculates a table with rowspans by using an algorithm based on a configuration file. This allows the application to render columns (and maintain their order) dynamically, depending on the calculated result. For example, see the code sn ...

javascripthtmlcssvue.js

Performing a bulk update using the array provided as the base for the update statement

In my database, there is a table called sched that I frequently need to update. To facilitate this process, I have created an HTML interface that displays the current values of the sched table for users to edit. Upon making changes, scripts are triggered ...

javascriptphpmysqlarraysajax

Is my jQuery code generating a large number of DOM objects?

I am currently developing a hex dumper in JavaScript to analyze the byte data of files provided by users. To properly display a preview of the file's data, I am utilizing methods to escape HTML characters as outlined in the highest-rated answer on thi ...

javascriptjqueryhtmlperformancegarbage-collection

Having issues with my JavaScript code - it just won't function

I am having an issue with my JavaScript code. I don't receive any errors, but when I click the submit button, nothing happens. I have followed a video tutorial and watched it twice, but I can't seem to figure out what is wrong here. Here is the ...

javascriptajax

Nodeca's js-yaml now allows appending '>-' to handle extended strings with ease

With the npm package js-yaml, I am attempting to work with a .yaml file. Although I can manipulate it successfully, I encounter an issue when trying to save a long string. Actual: abvs_adas: >- c2Rhc2Rhc2Rhc2Rhc2RwaW9qbGtkZ2hqbGtzZGhmZ2psaGFzamh ...

javascriptnode.jsnpmyaml

Changing a file object into an image object in AngularJS

Can a file object be converted to an image object? I am in need of the width and height from the file (which is an image). Here is my code: view: <button id="image_file" class="md-button md-raised md-primary" type="file" ngf-select="uploadFile($file ...

javascriptangularjs

Accessing a PDF document from a local directory through an HTML interface for offline viewing

As I work on developing an offline interface, I'm encountering an issue with displaying a PDF file when clicking on an image. Unfortunately, the code I have in place isn't working as intended. Can someone please assist me with this problem? Below ...

javascripthtml

The issue arises when attempting to use Bootstrap date and time components simultaneously

I am encountering an issue with the date picker and datetimepicker when used together in my form. If I only work on time or date individually, they function properly. However, when both are included, the time is not working correctly as it displays the dat ...

javascriptjqueryhtmldatebootstrap-4