묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
스크롤 배너 적용방법?
2015.11.30 04:50
아래 사진처럼 위로 올라가는 아이콘 위쪽에 블로그 바로가기 아이콘을 만들고 싶어요 ㅠ
빠른설치에서 위젯을 설치하여 적용하는게 빠를까요?
아니면 코드를 직접 작성해야하나요?
레이아웃은 XEDITION edited by kim tajo 사용중인데..
이부분에 코드를 넣어야할까요?
기본 제공되는 xedition기준으로
알고계시는 layout.html 그곳위에..
<!-- Blog -->
<a href="블로그주소" class="btn_blog">blog</a>
<!-- /Blog --> 추가
<!-- TOP -->
<a href="#" class="btn_top"><i class="xi-angle-up"><span class="blind">{$lang->cmd_move_up}</span></i></a>
<!-- /TOP -->
xedition/css/layout.css
.btn_top { display: none; position: fixed; right: 0; bottom: 57px; z-index: 1000; width: 48px; height: 48px; background-color: #555; font-size: 24px; color: #fff; text-align: center; opacity: 0.8; filter: alpha(opacity=80) } 밑에
.btn_blog { display: none; position: fixed; right: 0; bottom: 105px; z-index: 1000; width: 48px; height: 48px; background-color: #555; font-size: 24px; color: #fff; text-align: center; opacity: 0.8; filter: alpha(opacity=80) } 추가
xedition/js/layout.js에 붉은색 추가요..
// Scroll to top
var scrollToTop = function() {
var link = $('.btn_top');
var link2 = $('.btn_blog');
var windowW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
$(window).scroll(function() {
if (($(this).scrollTop() > 150) && (windowW > 1000)) {
link.fadeIn(100);
link2.fadeIn(100);
} else {
link.fadeOut(100);
link2.fadeOut(100);
}
});
테스트는 안해봤습니다.