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