[질답/버그/제안] 위젯을 하단 스크롤할때 안보여지고 위로 스크롤 할때 보여지는 부분요?
작성자 정보
- 관리자 작성
- 작성일
컨텐츠 정보
- 378 조회
-
목록
본문
혹시 사이드바 위젯을 아래 처럼 아래로 스크롤 하려고 하는데 안되네요.
그래서 위젯안쪽 파일중 widget.php 여기 메뉴 부분을 클래스로 --> class="bottomNav"
감싸도 안되네요.
안되지는 않을듯한데요 이렇게 아래의 코드를 적용하려면 이디를 손봐야 되는지요?
여기것은 그냥 안쓰고 위젯하나만 있어도 될듯해서요.
아래는 스크롤 될때 하단에서 상단으로 스콜시 보여지는 코드입니다.
----------------------------------------------------------------------------
<?php echo apms_widget('miso-sidebar'); //사이드바 및 모바일 메뉴(UI) ?>
/* CSS */
.pageTitle,
.bottomNav {position: fixed; z-index: 999999999; left: 0; bottom: 0; width: 100%; height: 52px; line-height: 52px; color: #fff; text-align: center;}
.pageTitle {top: 0; background:#111;}
.bottomNav {bottom: -52px; background:#111; transition:bottom .2s;}
.bottomNav.show {bottom: 0; background:#111;}
article {padding: 52px 3% 0;}
article .block {padding: 20px; min-height: 500px;}
article .block p {line-height: 22px; color: #fff; font-size: 16px; font-weight: 600;}
article .block:nth-child(2n+1) {background: #999;}
article .block:nth-child(2n) {background: #222;}
//Javascript
var lastScrollTop = 0;
var delta = 5;
var fixBox = document.querySelector('.bottomNav');
var fixBoxHeight = fixBox.offsetHeight;
var didScroll;
//스크롤 이벤트
window.onscroll = function(e) {
didScroll = true;
};
//0.25초마다 스크롤 여부 체크하여 스크롤 중이면 hasScrolled() 호출
setInterval(function(){
if(didScroll){
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled(){
var nowScrollTop = window.scrollY;
if(Math.abs(lastScrollTop - nowScrollTop) <= delta){
return;
}
if(nowScrollTop > lastScrollTop && nowScrollTop > fixBoxHeight){
//Scroll down
fixBox.classList.remove('show');
}else{
if(nowScrollTop + window.innerHeight < document.body.offsetHeight){
//Scroll up
fixBox.classList.add('show');
}
}
lastScrollTop = nowScrollTop;
}
------------------------------------
관련자료
-
링크