Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

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

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

7 months 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 job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.