页面滚动的jQuery阻力

时间:2014-12-16 17:02:27

标签: javascript jquery scroll

所以我得到了一个效果很好的代码。我首先在我的页面上有一个全屏滑块。 现在,如果我向下滚动它会使我通过滑块动画,如果我向上移动它会将我动画到页面顶部,看到滑块。

现在我想要一些阻力,当我滚动时,就像那里有一个障碍我必须在它动画下来之前打破。如果我不打破它,它会重新回到原来的位置。

关于我应该做什么的任何建议?

var lastScrollTop = 0;
var animationSpeed = 1000;
var scrollReady = 1;
jQuery(window).scroll(function(event){

    if (scrollReady == 1) {
        var winHeight = jQuery(window).height();

        var st = jQuery(this).scrollTop();
        if (st > lastScrollTop){
            // downscroll code

            if (st < winHeight) {
                // is at slider scrolling down

                // RESISTANCE CODE
                if (notBrokenBarrier) {
                    // Resistance before breaking barrier
                    // Some thing like this? maybe?
                    jQuery(this).scrollTop() / 4;

                    // Some setTimeout for snapping back
                } else {
                    // Broke barrier, scroll down.
                    jQuery("html, body").animate({ scrollTop: winHeight + "px" }, animationSpeed);
                    scrollReady = 0;
                    setTimeout(function(){scrollReady = 1;}, animationSpeed);
                }
            }
        } else if (st < lastScrollTop) {
            // upscroll code
            if (st < winHeight) {
                // scroll up to the slider
                jQuery("html, body").animate({ scrollTop: "0px" }, animationSpeed);

                scrollReady = 0;
                setTimeout(function(){scrollReady = 1;}, (animationSpeed+500));
            }
        }
        lastScrollTop = st;
    }
});

编辑:

这是一个jsbin:http://jsbin.com/lowuqiquji/1/edit?js,console,output

所以动画效果非常好,滚动滑过滑块,向上滚动到顶部。我想在这个动作中遇到一些阻力,让它更难以滚动过去。

0 个答案:

没有答案