Change Image on Scroll Position

Question

I would like to change an image on a certain scroll position. For example:

Scroll 100px show img1.jpg

Scroll 200px show img2.jpg

Scroll 300px show img3.j

Answer 1

$(window).on("scroll touchmove", function() 
{
	if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top  ) 
	{
		$('body').css('background-image', 'url(https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg)')
    };
	if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
	{
		$('body').css('background-image', 'url(https://i1.wp.com/cdn.catawiki.net/assets/marketing/uploads-files/45485-8bdcc8479f93d5a247ab844321b8b9d5e53c49a9-story_inline_image.jpg)')
    };
   if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top ) 
   {
		$('body').css('background-image', 'url(https://s-media-cache-ak0.pinimg.com/originals/e1/7a/03/e17a0385726db90de1854177d4af2b4f.jpg)')
   };
   if ($(document).scrollTop() >= $("#four").position().top) 
   {
		$('body').css('background-image', 'url(https://www.wallpaperup.com/uploads/wallpapers/2015/02/13/621414/6fc33c3ae65a58f9bb137f5cf011aebc.jpg)')
   };
  
});

*{
	margin:0;
	padding:0;
 }
.main{
	width:100%;
	height:100vh;
	background-image:url('https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg');
	background-size:100% 100%;
	background-attachment:fixed;
	transition: 1000ms;
	}
section{
	width: 100%;
	min-height: 1px;
	}
.content{
	width:50%;
	min-height:1px;margin-top:10%;
	margin-left:10%;
	color:white;
	}

	


	

		

			
first heading
			
description
	
		
	
	

		

			
second heading
			
description
	
		
	
	

		

			
third heading
			
description
	
		
	
	
	

		

			
fourth heading
			
description
	
		
	

documentation

create a web folder first.
create a img sub folder  // place  all images into this folder
now create three files // in web folder
index.html 
css.css
js.js 

copy code given bellow and paste it.
save the program.
finally run the program 

click on this link to see the video :https://www.youtube.com/watch?v=V97wCVY_SrQ
visit our website for full documentation :https://nozzons.blogspot.com/

index.html

    
    
    
     


    

        

            
first heading
            
description
  
        
    
    

        

            
second heading
            
description
   
        
    
    

        

            
third heading
            
description
   
        
  
    
    

        

            
fourth heading
            
description
   
        
    

css.css

*{
    margin:0;
    padding:0;
 }
.main{
    width:100%;
    height:100vh;
    background-image:url('img/img_one.jpg');
    background-size:100% 100%;
    background-attachment:fixed;
    transition: 1000ms;
    }
section{
    width: 100%;
    min-height: 1px;
    }
.content{
    width:50%;
    min-height:1px;margin-top:10%;
    margin-left:10%;
    color:white;
    }

js.js

$(window).on("scroll touchmove", function() 
{
    if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top  ) 
    {
        $('body').css('background-image', 'url(img/img_one.jpg)')
    };
    if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
    {
        $('body').css('background-image', 'url(img/img_two.jpg)')
    };
   if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top ) 
   {
        $('body').css('background-image', 'url(img/img_three.jpg)')
   };
   if ($(document).scrollTop() >= $("#four").position().top) 
   {
        $('body').css('background-image', 'url(img/img_four.jpg)')
   };

});