[英]animate scroll to specific page position on scroll
I'm trying to replicate the scroll event found on http://blkboxlabs.com/ , when the user scrolls it animates the screen to the next full height section, depending on if they scroll up or down. 我正在尝试复制在http://blkboxlabs.com/上找到的滚动事件,当用户滚动时,它会将屏幕动画化到下一个完整高度部分,具体取决于他们向上还是向下滚动。
I've got similar functionality, but it is much less smooth, and if the user scrolls enough it will skip 2 sections, as opposed to stopping at the next section. 我有类似的功能,但是它的平滑度要差得多,如果用户滚动足够,它将跳过2个部分,而不是在下一个部分停止。
var didScroll;
var lastScrollTop = 0;
var delta = 5;
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 800);
function hasScrolled() {
var st = $(document).scrollTop();
var winTop = $(window).scrollTop();
var winBottom = winTop + ($(window).height());
// Make sure they scroll more than delta
/*if(Math.abs(lastScrollTop - st) <= delta)
return;*/
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop){
// Scroll Down
$('.fullHeightScrollAssist').each(function(index, element) {
var elTop = $(this).offset().top;
var elBottom = elTop + $(this).outerHeight();
if(elTop > winTop && elTop < winBottom){
$('.fullHeightScrollAssist').removeClass('activeFullScreen');
$(this).addClass('activeFullScreen');
$('html,body').animate({scrollTop: elTop}, 700);
};
});
} else {
// Scroll Up
$('.fullHeightScrollAssist').each(function(index, element) {
var elTop = $(this).offset().top;
var elBottom = elTop + $(this).outerHeight();
if(elBottom > winTop && elTop < winTop){
$('.fullHeightScrollAssist').removeClass('activeFullScreen');
$(this).addClass('activeFullScreen');
$('html,body').animate({scrollTop: elTop}, 700);
};
});
}
lastScrollTop = st;
}
You can see my example at https://jsfiddle.net/raner/vhn3oskt/2/ 您可以在https://jsfiddle.net/raner/vhn3oskt/2/查看我的示例
What I'm trying to accomplish: 1. run the animate scrollTop function immediately on scroll, only once. 我要完成的工作:1.在滚动上立即运行动画atelineTop函数,仅运行一次。 2. kill any further scrolling once animation starts, to keep it from skipping the next section.
2.一旦动画开始,请停止任何进一步的滚动,以免跳过下一部分。
For anyone else who might like to know, here's a plugin I found that did something close to what I was looking for and was a lot smoother than my initial attempt. 对于其他可能想知道的人,这是我发现的一个插件,该插件的功能接近我的期望,并且比我最初尝试的要平滑得多。
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Smooth-Scroll-Snapping-panelSnap/demos/ http://www.jqueryscript.net/demo/jQuery-Plugin-For-Smooth-Scroll-Snapping-panelSnap/demos/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.