我正在构建一个包含一些部分的网站,每个部分都是窗口的 100% 高度,但最小为 800 像素
我想进行滚动,将 View 在一个滚动中从一个部分移动到另一个部分,但如果滚动较低,则 800 将像通常的滚动一样运行,直到到达新部分的末尾或开始,然后滚动到它。
我试着给自己写了一个脚本,但效果并不好
有好的脚本或教程吗?
(这是我到目前为止尝试做的……但没有成功……)
var prevScroll = $(window).scrollTop();
var currentSection = getCurrentSection();
$(window).scroll(function(){
var newScroll = $(this).scrollTop();
if (newScroll > prevScroll){
checkScrolling("down");
} else {
checkScrolling("up");
}
prevScroll = newScroll;
});
function checkScrolling(direction) {
var fromTop = $(window).scrollTop();
var windowHeight = Math.max($(window).height(), 800);
var currentPlace = $(currentSection).offset().top;
if ( direction == "down" ) {
if ( currentSection != ".blogs" ) {
var nextPlace = $(currentSection).next().offset().top;
if ( fromTop+windowHeight >= nextPlace ) {
$("html, body").animate({scrollTop: nextPlace}, 1000);
setTimeout(function(){
currentSection = getCurrentSection();
}, 1001);
}
}
} else {
if ( currentSection != ".about" ) {
var prevPlace = $(currentSection).prev().offset().top;
if ( fromTop <= prevPlace+windowHeight ) {
$("html, body").animate({scrollTop: prevPlace}, 1000);
setTimeout(function(){
currentSection = getCurrentSection();
}, 1001);
}
}
}
}
function getCurrentSection() {
var fromTop = $(window).scrollTop();
var windowHeight = Math.max($(window).height(), 800);
var s1 = $(".about").offset().top;
var s2 = $(".works").offset().top;
var s3 = $(".blogs").offset().top;
if ( s1 <= fromTop && fromTop < s1+windowHeight ) {
return ".about";
} else if ( s2 <= fromTop && fromTop < s2+windowHeight ) {
return ".works";
} else if ( s3 <= fromTop && fromTop <= s3+windowHeight ) {
return ".blogs";
}
}
最佳答案
我建议你看看scrollMagic
http://scrollmagic.io/examples/basic/section_wipes_natural.html
关于javascript - 从一个部分滚动到另一个部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42113344/