반응형
scroll event - 스크롤 이벤트 scroll start, scrolling, scroll stop
스크롤시 사라졌다가 스크롤 끝나면 다시 나오는 스크립트
https://gist.github.com/RubaXa/5569075
-- Page 배너 삽입, 모바일 하단에 위치고정
<div id="bottomrollbanner" style="position:fixed; bottom:0; height:49px; width:100%;background-color:bisque;">
배너 위치
</div>
<script type="text/javascript">
<!--
$(window).bind('scrollstart scrollend', function (evt){
if( evt.type == 'scrollstart' ){
// logic
console.log("scroll Start");
jQuery("#bottomrollbanner").fadeOut("fast");
}
if( evt.type == 'scrollend' ){
// logic
console.log("scroll End");
jQuery("#bottomrollbanner").fadeIn("slow");
}
});
var currentScrollTop, temporalScroll = 0;
$(window).scroll(function(){
currentScrollTop = $(this).scrollTop();
console.log('Previous value: ' + temporalScroll);
if (currentScrollTop > temporalScroll) {
console.log('scroll down - Current value: ' + currentScrollTop);
}
else {
console.log('scroll up - Current value: ' + currentScrollTop);
}
temporalScroll = currentScrollTop;
});
//-->
</script>
반응형
'프로그래밍 > Script' 카테고리의 다른 글
| [jQuery] jQuery Autotab: Auto-tabbing and filtering for forms (0) | 2014.11.06 |
|---|---|
| [Node.js] The Node Beginner Book (0) | 2014.10.30 |
| [jQuery] NoUiSlider: A tiny range slider (0) | 2014.10.20 |
| [jQuery] 시작페이지로 지정하기 Script (0) | 2014.10.13 |
| [jQuery] like Pinterest. 핀트레스트 같은 그리드(Grid) (0) | 2014.10.08 |
