我有n个< section>在一个页面中.每个都提供id,例如’page1′,’page2’……
在顶部我放置2个按钮说上一个和下一个.按下PrevIoUs时,它将滚动到PrevIoUs< section>.与下一个<部分>类似.按下Next Button.
解决方法
您可以检查您的部分是否在“ViewPort”中,我使用它来查找：
function isTotallyInViewPort($entry){
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var windowVisibleBottom = windowScrollTop + windowHeight;
var entryTop = $entry.offset().top;
var entryOuterHeight = $entry.outerHeight();
var entryVisibleBottom = entryTop + entryOuterHeight;
var isInView = windowScrollTop < ( entryTop ) < (windowVisibleBottom);
if(!isInView) return false;
var isCompleteInView = ( entryVisibleBottom ) < (windowVisibleBottom);
return isCompleteInView;
}
如果要检测是否显示PARTS,只需创建一个函数,检查当前视图是否与节的位置重叠.
你可以将它绑定到$(window).on(“scroll”)
编辑：
我认为这应该检测你的元素是否显示(尚未测试)
function isPartlyInViewPort($entry){
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var windowVisibleBottom = windowScrollTop + windowHeight;
var entryTop = $entry.offset().top;
var entryOuterHeight = $entry.outerHeight();
var entryVisibleBottom = entryTop + entryOuterHeight;
var isAboveViewPort = entryVisibleBottom < windowScrollTop;
var isBelowViewPort = windowVisibleBottom < entryTop;
return !(isAboveViewPort || isBelowViewPort);
}
