Question

我正在尝试做的是在页面滚动上设置由SVG组成的固定菜单。我面临的问题是：

滚动时动画停止。可能是因为它检查了每个px滚动的位置。我看到了this但是还不足以使ford的解决方案适应我的代码
即使有一点滚动项目动画。更确切地说：如果我在768下滚动动画几乎可以工作，但如果我再滚动一点，动画完成后，项目会水平动画。
“回归”不起作用（我把它作为评论）：它只是在页面加载后与其他动画和触发器排队，但即使我向后滚动顶部也不会重新激活

很难成为新手:(

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 768;
    var comeback = 400;

    if(y_scroll_pos > scroll_pos_test) {
        $("#pallino2").animate({top: '565px', left: '893px'});
        $("#pallino2").animate({left: '900px'});

        $("#pallino3").animate({top: '565px', left: '958px'});
        $("#pallino3").animate({left: '965px'});

        $("#pallino4").animate({top: '565px', left: '1023px'});
        $("#pallino4").animate({left: '1030px'});

        $("#pallino5").animate({top: '565px', left: '1088px'});
        $("#pallino5").animate({left: '1095px'});
    }
    //else if(y_scroll_pos <= comeback) {
//      $("#pallino2").animate({top: '515px', left: '885px'});
//  }
});

$(document).ready(function() {
  $("h1,.p").mouseenter(function() {
    $("#pallino1").animate({
      top: '565px'
    });
  });
});

$(document).ready(function() {
  $("h1,.p").mouseenter(function() {
    $("#pallino2").animate({
      top: '565px',
      left: '893px'
    });
    $("#pallino2").animate({
      left: '900px'
    });
  });
});

$(document).ready(function() {
  $("h1,.p").mouseenter(function() {
    $("#pallino3").animate({
      top: '565px',
      left: '958px'
    });
    $("#pallino3").animate({
      left: '965px'
    });
  });
});

$(document).ready(function() {
  $("h1,.p").mouseenter(function() {
    $("#pallino4").animate({
      top: '565px',
      left: '1023px'
    });
    $("#pallino4").animate({
      left: '1030px'
    });
  });
});

$(document).ready(function() {
  $("h1,.p").mouseenter(function() {
    $("#pallino5").animate({
      top: '565px',
      left: '1088px'
    });
    $("#pallino5").animate({
      left: '1095px'
    });
  });
});


$(window).scroll(function() {
  var y_scroll_pos = window.pageYOffset;
  var scroll_pos_test = 50;
  var comeback = 400;

  if (y_scroll_pos > scroll_pos_test) {
    $("#pallino2").animate({
      top: '565px',
      left: '893px'
    });
    $("#pallino2").animate({
      left: '900px'
    });

    $("#pallino3").animate({
      top: '565px',
      left: '958px'
    });
    $("#pallino3").animate({
      left: '965px'
    });

    $("#pallino4").animate({
      top: '565px',
      left: '1023px'
    });
    $("#pallino4").animate({
      left: '1030px'
    });

    $("#pallino5").animate({
      top: '565px',
      left: '1088px'
    });
    $("#pallino5").animate({
      left: '1095px'
    });
  }
  //else if(y_scroll_pos <= comeback) {
  //		$("#pallino2").animate({top: '515px', left: '885px'});
  //	}
});
$(document).ready(function() {
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
      });
    }
  });
});

div {
  width: 1366px;
  height: 768px;
  margin-left: 139px;
}

#pallino1 {
  top: 565px;
  left: 835px;
}

#pallino2 {
  top: 515px;
  left: 885px;
}

#pallino3 {
  top: 465px;
  left: 935px;
}

#pallino4 {
  top: 415px;
  left: 985px;
}

#pallino5 {
  top: 365px;
  left: 1035px;
}

.p {
  position: fixed;
  transition: 0.5s;
}

.s:hover {
  height: 180px;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>portfolio</title>
  <link href="stile.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width,initial-scale=1.004" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="scripts.js"></script>

</head>

<body>
  <div id="home">
    <h1>my<br>name</h1>
    <h2>
      some text
    </h2>
  </div>
  <div id="bio"></div>
  <div id="port"></div>
  <div id="upd"></div>
  <div id="cont"></div>



  <div id="pallino1" class="p">
    <h3 id="mh" class="mm">home</h3>
    <a href="#home">
      <svg width="50" height="200" position="absolute">
   		<rect class="s" rx="25" ry="25" width="50" height="50" style="fill:black;" position="absolute"/>
	</svg>
    </a>
  </div>
  <div id="pallino2" class="p">
    <h3 id="mb" class="mm">bio</h3>
    <a href="#bio">
      <svg width="50" height="200" position="absolute">
   		<rect class="s" rx="25" ry="25" width="50" height="50" style="fill:black;" position="absolute"/>
	</svg>
    </a>
  </div>
  <div id="pallino3" class="p">
    <h3 id="mp" class="mm">porfolio</h3>
    <a href="#port">
      <svg width="50" height="200" position="absolute">
   		<rect class="s" rx="25" ry="25" width="50" height="50" style="fill:black;" position="absolute"/>
	</svg>
    </a>
  </div>
  <div id="pallino4" class="p">
    <h3 id="mn" class="mm">news</h3>
    <a href="#upd">
      <svg width="50" height="200" position="absolute">
   		<rect class="s" rx="25" ry="25" width="50" height="50" style="fill:black;" position="absolute"/>
	</svg>
    </a>
  </div>
  <div id="pallino5" class="p">
    <h3 id="mc" class="mm">contatti</h3>
    <a href="#cont">
      <svg width="50" height="200" position="absolute">
   		<rect class="s" rx="25" ry="25" width="50" height="50" style="fill:black;" position="absolute"/>
	</svg>
    </a>

  </div>




</body>

</html>

无法让jQuery动画正常工作

0 个答案: