所以我得到了一个效果很好的代码。我首先在我的页面上有一个全屏滑块。 现在,如果我向下滚动它会使我通过滑块动画,如果我向上移动它会将我动画到页面顶部,看到滑块。
现在我想要一些阻力,当我滚动时,就像那里有一个障碍我必须在它动画下来之前打破。如果我不打破它,它会重新回到原来的位置。
关于我应该做什么的任何建议?
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
所以动画效果非常好,滚动滑过滑块,向上滚动到顶部。我想在这个动作中遇到一些阻力,让它更难以滚动过去。