사용자가 스크롤하면 div를 숨기고 맨 위로 돌아갈 때 표시합니다.

Question

페이지가로드되면 두 개의 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 : 코드의이 비트에서 온다 사용자가 화면 상단 가시 영역에있을 때 당신은 단지 DIV를 보여주고 싶어하고

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(); 
    } 

} 

Answer 1

underrating 당으로. 그리고 사용자 일단 문서로드에

$(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'요소.

회전시 탭 에서처럼 크기 조정 방법을 추가 할 수도 있습니다.