スクロールでHTML img srcを変更する

スクロールの高さに応じて画像を変更するにはどうすればよいのですか？スクロールスクロールでHTML img srcを変更する

<div id="astronaut"> 
       <img src="img/astronaut-travel.svg" alt="Astronaut Travelling" /> 
</div>

現在CSS（画像中心）

#astronaut { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 100; 
}

現在のJavaScript（所望の高さに固定された画像の位置を変える）

に所望

現在

<div id="astronaut"> 
       <img src="img/astronaut.svg" alt="Astronaut Static" /> 
</div>

window.onscroll = function(){ 

    if(window.scrollY >= 1000) { 
     document.getElementById('astronaut').setAttribute(
     "style", "position:fixed;"); 
    }else { 
     document.getElementById('astronaut').setAttribute(
     "style", ""); 
    } 

};

出典

2017-03-14 Clams Are Great

window.onscroll = function(){ 

    if(window.scrollY >= 1000) { 
     document.getElementById("astronaut").src="../img/astronaut-travel.svg"; 
    }else { 
     document.getElementById("astronaut").src="../img/astronaut.svg"; 
    } 

};

出典

2017-03-14 17:51:17 jonmrich

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
window.onscroll = function(){ 

    if(window.scrollY >= 100) { 
     document.getElementById('astronaut').setAttribute(
     "style", "position:fixed;"); 
     $('#astronaut img').attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Small-world-network-example.png/220px-Small-world-network-example.png') 
    }else { 
     document.getElementById('astronaut').setAttribute(
     "style", ""); 
    } 
}; 
}); 
</script> 
<style> 
    #astronaut { 
    background:red; 
height:1050px; 
    z-index: 100; 
} 
</style> 
</head> 
<body> 
<div id="astronaut"> 
    <img src="http://www.mathcurve.com/polyedres/archimedien/pavage-sphere-dodecaedreTronque.jpg" alt="Astronaut Static" /> 
</div> 
</body> 
</html>

出典

2017-03-15 11:53:07

スクロールでHTML img srcを変更する

答えて

関連する問題