固定pagetop、window.innerHeightがiPhoneスクロールバー対応
#page-top {
position: fixed;
z-index: 7;
bottom: 20px;
right: 10px;
transition: opacity .5s;
opacity: 0;
height: 40px;//高さを指定しないとline-heightで意図せぬ高さになる時があるので
-webkit-transform: translate3d(0, 0, 0);//iOSちらつき対策
&.is-stop {
position: absolute;
z-index: 7;
top: -50px;
bottom: auto;
right: 10px;
}
&.is-view {
display: block!important;
opacity: 1;
}
}
/* PAGE TOP
==================================================== */
var pagetop = $('#pagetop');
$(window).on('touchstart touchmove touchend scroll',function() {
var scrollHeight = $(document).height();
var scrollTop = $(window).scrollTop();
var scrollPosition = window.innerHeight + scrollTop;
var footHeight = $("#gFooter").outerHeight();
if( scrollTop > 300 ) {
pagetop.addClass('is-view');
}else {
pagetop.removeClass('is-view');
}
// fixedの時のbottom position 20px
// footerの10px上に固定
// 10px - 20px = -10
if(scrollHeight-scrollPosition <= footHeight - 10) {
pagetop.addClass('is-stop');
}
else {
pagetop.removeClass('is-stop');
}
});