スクロールポジションで固定画像の位置を変更する

Question

自分のポートフォリオには、1ページのWebサイトがあります。より個人的にするために、私は固定画像である私の頭の低ポリバージョンを作成しました。 しかし、どのセクションが現在表示されているかによって、その位置を変更するにはどうすればよいですか？ 例：誰かがウェブサイトにアクセスして「情報」をクリックすると、ページが下にスクロールし、画像が左にアニメートされるので、表示したいコンテンツのためのスペースが増えます。

画像のCSS：私はすでにJavaScriptを使用して試してみた何

img.imgPerson{ 
position: fixed; 
z-index:2; 
top: 48%; 
left: 50%; 
margin-top: -242px; 
margin-left: -175px; 
} 

：

$(window).scrollTop() > 450 { 
    $('.imgPerson').animate({ 
     "left": '350px' 
     }, 300); 
} 

Answer 1

Working fiddle。

あなたはifキーワードを使用する必要がありますし、scrollイベントによって、あなたのコードをラップしました：

var animate_right = true; 
var animate_left = true; 

$(window).on('scroll', function(){ 
    if($(window).scrollTop() > 450){ 
    if(animate_right){ 
     animate_right=false; 
     animate_left=true; 

     $('.imgPerson').animate({"left": '550px'}, 300); 
    } 
    }else{ 
    if($('.imgPerson').css('left')=='550px'){ 
     animate_left=false; 
     animate_right=true; 

     $('.imgPerson').animate({"left": '250px'}, 300); 
    } 
    } 
}) 

は、この情報がお役に立てば幸いです。

var animate_right = true; 
 
var animate_left = true; 
 

 
$(window).on('scroll', function(){ 
 
    if($(window).scrollTop() > 450){ 
 
    if(animate_right){ 
 
     animate_right=false; 
 
     animate_left=true; 
 

 
     $('.imgPerson').animate({"left": '550px'}, 300); 
 
    } 
 
    }else{ 
 
    if($('.imgPerson').css('left')=='550px'){ 
 
     animate_left=false; 
 
     animate_right=true; 
 

 
     $('.imgPerson').animate({"left": '250px'}, 300); 
 
    } 
 
    } 
 
})

body{ 
 
    height: 1000px; 
 
} 
 

 
img.imgPerson{ 
 
    position: fixed; 
 
    z-index:2; 
 
    top: 48%; 
 
    left: 50%; 
 
    margin-top: -242px; 
 
    margin-left: -175px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src='http://android-foundry.com/wp-content/uploads/signup2-img.png' class='imgPerson'/>