滚动时创建标题书签

时间:2016-03-17 09:38:29

标签: jquery html tweenmax gsap

我在滚动上制作书签。这个概念:当你滚动和标题到达屏幕顶部脚本添加到左侧专用书签。我也使用TweenMax为此动作添加一些动画。现在的问题是,当我在被移除的书签周围来回滚动时,它不会被添加到左侧,通过它围绕它滚动2-4个。可以理解为什么。有任何想法吗? Codepen here。代码本身:

$(window).scroll(function () {
    $('h2').each(function(i){
        var elementOnTop = $(this).offset().top,
            winSize = $(window).scrollTop(),
            title = $(this).text(),
            textId = 'title-' + i++ ,
            linkTo = $(this).attr('id');

        if (winSize > elementOnTop) {
            if ($('.marks a:contains('+ title + ')').length == 0) {
                $('.marks').append('<a href="#' + linkTo + '" id="' + textId + '">' + title + '</a>');
                TweenMax.from('#'+textId, 1, {y: -20, opacity: 0, ease:Elastic.easeOut, force3D:false}, 0.2);
            }

        } else {
            TweenMax.to('#'+textId, 1, {y: -20, opacity: 0, ease:Back.easeOut, force3D:false,  onComplete:function(){(this.target).remove()}});

        }
    })
});

0 个答案:

没有答案