用户滚动后，隐藏 div 然后在返回顶部时显示答案

【问题标题】：As soon as the user scrolls, hide div then show when back to the top用户滚动后，隐藏 div 然后在返回顶部时显示
【发布时间】：2013-02-23 11:45:22
【问题描述】：

加载页面时，我会显示两个 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();
    }

}

【问题讨论】：

你能为此做一个小提琴吗？，尝试记录要跟踪的值
如何记录这些值？
console.log($(this).scrollTop());
请原谅我的菜鸟问题，但我在哪里查看日志？我在控制台中什么也没看到？
那你没有达到滚动功能:)

标签： jquery scroll hide jscrollpane show-hide

【解决方案1】：

根据低估，您只想在用户位于屏幕顶部可见区域时显示 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”元素。

我们还添加了调整大小的方法，因为它也可以在选项卡上旋转

【讨论】：