Question

对于我自己的投资组合，我有一个单页的网站。为了使它更个性化我创造了我的头部的低聚版本，这是固定的图像。但是，我如何根据当前正在查看的部分更改其位置？示例：当有人访问该网站并单击“关于”时，页面将向下滚动，图像将向左侧显示动画，因此我想要显示的内容将有更多空间。

图片的CSS：

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

我已尝试使用Javascript：

$(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'/>

使用滚动位置更改固定图像的位置

1 个答案: