사업부 fadeIn/아웃 페이지

Question

의 상단에 스크롤 + 가시성에 내가 현재 사용하고 있습니다 :

<script> 
 
$(window).scroll(
 
    { 
 
     previousTop: 0 
 
    }, 
 
    function() { 
 
    var currentTop = $(window).scrollTop(); 
 
    if (currentTop < this.previousTop) { 
 
     $("#menu").fadeIn(); 
 
    } else { 
 
     $("#menu").fadeOut(); 
 
    } 
 
    this.previousTop = currentTop; 
 
}); 
 
</script>

내 페이지의 메뉴를 만들려면 아래로 스크롤 할 때 페이드 아웃 및 페이드 인 스크롤 할 때 위로, 어떤 작품. 작동하지 않는 것은 내가 페이지 상단에있을 때 항상 보일 필요가 있다는 것입니다.

스크롤 솔루션에서 페이드 인/아웃이 비활성화 된 유일한 솔루션은 두 솔루션이 함께 작동하는 솔루션을 찾으려고합니다. 전의. 상단 200px를 스크롤 할 때 항상 표시되지만 스크롤 위/아래로 페이드 인/아웃 기능이 있습니다. 어떤 제안? 감사!

Answer 1

코드를 편집하고 시험해 보았습니다. 가장 좋은 방법은 페이드 아웃 제거하는 것입니다 : 귀하의 제안에 대한

<script> 
$(window).scroll(
    { 
     previousTop: 0 
    }, 
    function() { 
    var currentTop = $(window).scrollTop(); 
    if (currentTop == 0) { 
     $("#menu").addClass('static-on-top'); 
    } else { 
     $("#menu").removeClass('static-on-top'); 
     if (currentTop < this.previousTop) { 
      $("#menu").fadeIn(); 
     } else { 
      $("#menu").hide(); 
     } 
    } 
    this.previousTop = currentTop; 
}); 
</script> 
<style type="text/css"> 
.static-on-top { 
     display: block !important; 
} 
#menu { 
    position: fixed; 
    height: 30px; 
    background: red; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 
</style> 
<div id="menu"> 
    Menu 
</div> 

Answer 2

i sugget 페이지 상단에 클래스 이름을 추가하십시오. 그런 다음 CSS로 스타일을 지정하여 항상 맨 위에 표시 할 수 있습니다.

<script> 
$(window).scroll(
    { 
     previousTop: 0 
    }, 
    function() { 
    var currentTop = $(window).scrollTop(); 
    if (currentTop == 0) { 
     $("#menu").addClass('static-on-top'); 
    } else { 
     $("#menu").removeClass('static-on-top'); 
     if (currentTop < this.previousTop) { 
      $("#menu").fadeIn(); 
     } else { 
      $("#menu").fadeOut(); 
     } 
    } 
    this.previousTop = currentTop; 
}); 
</script> 
<style type="text/css"> 
.static-on-top { 
     display: block !important; 
} 
</style>