javascript 20180525追従を横滑で表示（sp时无效）

Posted 2021-05-03

<div class="con_fix">
	<div class="inner">
		<div class="wrap_con">
			<a href="<?php echo LOCATION; ?>access/"><span class="img"><img src="<?php echo LOCATION_FILE; ?>images/common/ic_access.png" alt="アクセス"></span><span class="txt">アクセス</span></a>
		</div><!-- /.wrap_con -->
		<div class="wrap_con">
			<a href="<?php echo LOCATION_RSV; ?>"><span class="img"><img src="<?php echo LOCATION_FILE; ?>images/common/ic_rsv.png" alt="宿泊予約"></span><span class="txt">宿泊予約</span></a>
		</div><!-- /.wrap_con -->
		<div class="wrap_con chat">
			<a href="https://trip-ai.jp/chat/326110/" target="_blank"><span class="img"><img src="<?php echo LOCATION_FILE; ?>images/common/ic_chat.png" alt="チャットで質問"></span><span class="txt">チャット<br>で質問</span></a>
		</div><!-- /.wrap_con -->
		<div class="wrap_con wrap_hamburger">
			<div class="hamburger">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<p class="menu_txt">メニュー</p>
		</div><!-- /.wrap_con -->
		<p class="box_ic view_pc-tab">京都駅<br>2分!</p>
	</div>
</div><!-- /.con_fix -->

.con_fix {
	z-index: 99999;
	position: fixed;
	@include cV(right,-200px,-90px,auto);
	@include cV(top,6%,6%,auto);
	transition-duration: .3s;
	transition-timing-function: ease;
	@include mq(sp) {
		bottom: 0;
		transform: translateY(0);
		width: 100%;
	}
}

.fixed{
	position: fixed;
	@include cV(right,-90px,-90px,auto);
	@include cV(top,6%,6%,auto);
}

$(function() {
	//sp時は無効
	if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
		var headNav = $(".con_fix");
		//scrollだけだと読み込み時困るのでloadも追加
		$(window).on('load scroll', function () {
			//現在の位置が500px以上かつ、クラスfixedが付与されていない時
			if($(this).scrollTop() > 700 && headNav.hasClass('fixed') == false) {
				//クラスfixedを付与
				headNav.addClass('fixed');
			}
			//現在の位置が300px以下かつ、クラスfixedが付与されている時にfixedを外す
			else if($(this).scrollTop() < 700 && headNav.hasClass('fixed') == true){
				headNav.removeClass('fixed');
			}
		});
	}
});