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