matometaru
12/7/2016 - 4:36 AM

固定pagetop、window.innerHeightがiPhoneスクロールバー対応

固定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');	
	}
});