当页面加载时,我有两个显示的div,当用户开始滚动时,隐藏div。当用户返回顶部时,再次显示div。当使用窗口作为目标时,这很简单,但是我使用的是jScrollPane而不太确定如何正确定位滚动窗格:
$('.content').scroll(function() {
console.log($(this).scrollTop());
if ($(this).scrollTop()>0)
{
$('#bb-nav-next').fadeOut();
}
else
{
$('#bb-nav-next').fadeIn();
}
});
我认为可能会影响性能的一些代码(这段代码来自:http://pastebin.com/UmyJ6zBW):
function setJSP( action, idx ) {
var idx = idx === undefined ? current : idx,
$content = $items.eq( idx ).children( 'div.content' ),
apiJSP = $content.data( 'jsp' );
if( action === 'init' && apiJSP === undefined ) {
$content.jScrollPane({verticalGutter : 0, hideFocus : true });
}
else if( action === 'reinit' && apiJSP !== undefined ) {
apiJSP.reinitialise();
}
else if( action === 'destroy' && apiJSP !== undefined ) {
apiJSP.destroy();
}
}
答案 0 :(得分:0)
根据低估,您只想显示DIV,并且当用户位于屏幕的顶部可见区域时。一旦用户向下滚动div需要隐身,为此使用以下方法
$(document).on('load scroll', splDiv);
$(window).on('resize', splDiv);
var ele = $('#bb-nav-next');
function splDiv() {
if($(window).scrollTop() > window.innerHeight){
ele.fadeOut();
}else{
ele.fadeIn();
}
};
基本上在文档加载和滚动时,我们将splDiv方法与它相关联,因此当您在第一个可见区域后向下滚动时,它将隐藏您的'#bb-nav-next'元素。
我们确实添加了resize方法,因为旋转它也适用于标签