En este momento tengo una imagen fija en el encabezado. Quiero decir que cuando se desplazó la mitad de la página, la imagen del encabezado cambió a otra.
¿Necesito usar javascript para esto o puedo arreglármelas con 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>Puede usar scrollTop() y especificar cuándo cambiará exactamente la imagen
$(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>