• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

103
Views
change header image on scroll

Right now I have one fixed image in the header. I want to say that when half the page was scrolled, the picture in the header changed to another.

Do I need to use javascript for this or can I get by with css?

body {
    height:1200px;
    width:100%;
    background-color:#fbfbfb;
}
.header_nav {
    width:100%;
    height:150px;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
    color:#fff;
    background-repeat: no-repeat;
    background-position: center center;
}

img {
  width: 150px;
  display: block;
  margin: 0 auto;
}
<div class="header_nav"><img src="https://i.picsum.photos/id/244/200/200.jpg?hmac=Q1gdvE6ZPZUX3nXkxvmzuc12eKVZ9XVEmSH3nCJ2OOo"></div>

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You can use scrollTop() and specify when exactly the image will change

$(function () { 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) { 
            $('.header_nav img').attr('src','https://i.picsum.photos/id/912/200/200.jpg?hmac=tYYyMFni6bya5yEVkwmmFekjWGedHVByLtPI5q1lcyw');
        }
        if ($(this).scrollTop() < 600) { 
            $('.header_nav img').attr('src','https://i.picsum.photos/id/244/200/200.jpg?hmac=Q1gdvE6ZPZUX3nXkxvmzuc12eKVZ9XVEmSH3nCJ2OOo');
        }
    })
});
body {
    height:1200px;
    width:100%;
    background-color:#fbfbfb;
}
.header_nav {
    width:100%;
    height:150px;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
    color:#fff;
    background-repeat: no-repeat;
    background-position: center center;
}

img {
  width: 150px;
  display: block;
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header_nav"><img src="https://i.picsum.photos/id/244/200/200.jpg?hmac=Q1gdvE6ZPZUX3nXkxvmzuc12eKVZ9XVEmSH3nCJ2OOo"></div>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error