页面滚动操作

时间:2018-09-28 22:05:14

标签: jquery scroll custom-scrolling

我正在尝试与此页面http://www.beargrylls.com/相同的标题滚动效果 这是我的代码,如果我再次滚动它停止的页面顶部,它仅以一种方式起作用。我不知道该怎么办。 https://jsfiddle.net/f9tahxw7/

$(window).scroll(function(){
    if($('.anim:visible').length == 1){
        var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
        var scrollPercent = 1 - (s / (d-c));
        var scaler = 1 + (s / (d-c)/5);
        var scalery = 1 + (s / (d-c)*1.06);
        var opacity = scrollPercent;
        var sca = scaler;
        var scay = scalery;
        $('.anim').css('opacity',opacity);
        $('.img1').css('transform', 'scale(' + sca + ')');
        $('.img2').css('transform', 'scale(' + scay + ')');
    }else{
        if($('.ghost:visible').length == 1){
            var k = $(window).scrollTop(),
            t = $(document).height(),
            s = $(window).height();
            var scrollPercent = (k / (t-s) * 100);
            var line = scrollPercent;
            $('.line').css('height', line +'vh');
        }

        if(line == 100){
            $('.content').css({'position':'relative','overflow':'scroll'});
            $('.line-clone').css('height','100vh');
            $('html,body').scrollTop(0);
            $('body').removeClass('hide');
        }
    }  
    if(opacity == 0){
        $('.anim').css('display','none');
        $('html,body').scrollTop(0);
    }
});

0 个答案:

没有答案