3

ボタンの下に小さな矢印が付いたトップメニューを作成しました。この矢印を、1ページのデザインのスクロールがある場所に対応して移動させたいです。

基本は機能していると思います...しかし、矢印をアニメーション化しようとすると（ボタン間をジャンプするのではなく）、どういうわけかそれはフリップピンを維持します。私はそれが複数の>=...と関係があると思いますが、私は代替案を考えることができません。誰かアドバイスをいただけますか？

効果はここで見ることができます：http ：//www.lightwavedesign.nl/

私が使用しているJSは次のとおりです。

    function goToByScroll(id){
        $('html,body').animate({scrollTop: $("#"+id).offset().top-78},'1000');
    };

    window.onload = function() {
      var link1 = $("#Welkom"); var positionLink1 = link1.position();
      var link2 = $("#OverMij"); var positionLink2 = link2.position();
      var link3 = $("#Portfolio"); var positionLink3 = link3.position();
      var link4 = $("#Contact"); var positionLink4 = link4.position();

      function getScrollTop() {
        if (typeof window.pageYOffset !== 'undefined' ) {return window.pageYOffset;}
        var d = document.documentElement;
        if (d.clientHeight) {return d.scrollTop;}
        return document.body.scrollTop;
      }

      window.onscroll = function() {
        var box = document.getElementById('menuAanwijzer'),
        scroll = getScrollTop();
        if (scroll <= positionLink2.top) {$('#menuAanwijzer').animate({left: '665px'}, 100)}
        if (scroll >= positionLink2.top-80) {$('#menuAanwijzer').animate({left: '760px'}, 100)}
        if (scroll >= positionLink3.top-80) {$('#menuAanwijzer').animate({left: '860px'}, 100)}
        if (scroll >= positionLink4.top-80) {$('#menuAanwijzer').animate({left: '960px'}, 100)}
        if (scroll >= positionLink2.top-80) {$('#menuTitel').fadeIn('500');}
        if (scroll <= positionLink2.top-80) {$('#menuTitel').fadeOut('500');}

      };
    };
4

1 に答える 1

2

シンプルで、.stop()
.stop（）。animate（）を使用してアニメーションキューをクリアします

    if (scroll <= positionLink2.top) {$('#menuAanwijzer').stop().animate({left: '665px'}, 100)}
    if (scroll >= positionLink2.top-80) {$('#menuAanwijzer').stop().animate({left: '760px'}, 100)}
    if (scroll >= positionLink3.top-80) {$('#menuAanwijzer').stop().animate({left: '860px'}, 100)}
    if (scroll >= positionLink4.top-80) {$('#menuAanwijzer').stop().animate({left: '960px'}, 100)}
    if (scroll >= positionLink2.top-80) {$('#menuTitel').stop().fadeIn('500');}
    if (scroll <= positionLink2.top-80) {$('#menuTitel').stop().fadeOut('500');}
于 2012-11-29T16:02:52.397 に答える