사용자가 위로 스크롤 할 때까지 검색 표시 줄을 숨길 수있는 방법이 있습니까? iPhone의 메시지 앱과 비슷합니까?

Question

기본적으로 페이지가로드 될 때 페이지의 맨 위에있는 검색 표시 줄이 헤더 아래에 있도록 스크롤되도록 미리 지정해야합니다. 사용자가 위로 스크롤하면 볼 수 있고 사용할 수 있습니다. 이 ... 어떤 아이디어를 작동하지 않는 몇 가지 이유를 들어

var lastScrollTop = 0; 
$(window).scroll(function(){ 
    var st = $(this).scrollTop(); 
    if(st<=lastScrollTop){ 
     //scroll up 
     if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch'); 
     else $('#searchInput').removeClass('stickySearch').addClass('slideIn'); 
    } 
    else $('#searchInput').removeClass('stickySearch').removeClass('slideIn'); 
    lastScrollTop = st; 
}); 

: I는 이것을 사용

.stickySearch{ 
    width:56% !important; 
    position:fixed !important; 
    left:0; 
    right:0; 
} 

JS :

나는 이런 식으로 CSS를 설정?

Answer 1

로직이 약간 잘못되었습니다. if 문에 대괄호를 추가하면 문제를 빨리 볼 수있었습니다. 사용자가 화면의 맨 위를 지났을 때 테스트 할 위치도 변경했습니다.

JS

var lastScrollTop = 0; 

$(window).scroll(function(){ 

    var st = $(this).scrollTop(); 

    if(st > 235) {   
     if(st<=lastScrollTop){ 
      //scroll up 
      $('#searchInput').removeClass('slideOut'); 
     } else { 
      //Scroll down 
      $('#searchInput').addClass('slideOut'); 
     } 

    } else { 
     //At top of page 
     $('#searchInput').removeClass('slideOut'); 
    } 

    lastScrollTop = st; 
}); 

CSS

.stickySearch{ 
    width:56% !important; 
    position:fixed !important; 
    left:0; 
    right:0; 
    border:1px solid grey; 
    overflow: hidden; 
    height: 1.5em; 
    line-height: 1.5em; 
    transition: height 100ms linear; 
} 

.slideOut { 
    height: 0em; 
} 

제공 바이올린 : http://jsfiddle.net/op6p9xb7/1/