javascript 170607别で追従追加

Posted 2021-05-04

#gnav_fix {
	background: url(../images/header/bg_gnav.jpg);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	@include mq(sp) {
		display: none;
	}
	.wrap {
		@extend %cf;
		@extend %bw;
		@include mq(max_w, 1260px) {
			max-width: 1024px
		}
		ul {
			float: left;
			width: 64%;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			text-align: center;
			text-transform: uppercase;
			@include mq(max_w, 1260px) {
				width: 71%;
			}
			* {
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				-webkit-transition: all 0.35s ease;
				transition: all 0.35s ease;
			}
			li {
				display: inline-block;
				list-style: outside none none;
				padding: .8em .4em;
				width: 100%;
				position: relative;
				border-right: 1px solid rgba(#fff,.3);
				&:first-child {
					border-left: 1px solid rgba(#fff,.3);
				}
				@include mq(tab) {
					padding: .5em .3em;
				}
				a {
					color: #fff;
					font-family: $f_min;
					font-size: .95em;
					text-decoration: none;
					padding: 0.3em 0;
					display: block;
					@include mq(max_w, 1260px) {
						font-size: .9em;
					}
					@include mq(tab) {
						font-size: .9em;
					}
				}
				&:after {
					display: block;
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					-webkit-transform: translate(-50%, 0);
					-ms-transform: translate(-50%, 0);
					transform: translate(-50%, 0);
					width: 0;
					height: 5px;
					background: $c_orange;
				}
				&:hover {
					&:after {
						width: 100%;
						-webkit-transition: all 0.4s ease;
						transition: all 0.4s ease;
					}
				}
			}
		}
		.contact_h {
			float: left;
			width: 32%;
			margin-left: 4%;
			@extend %cf;
			margin-top: 6px;
			@include mq(max_w, 1260px) {
				width: 23%;
			}
			.tel_h {
				line-height: 1.2;
				float: left;
				.jp {
					font-family: $f_min;
					font-size: .7em;
					color: #fff;
				}
				.tel {
					font-size: 1.6em;
					font-family: $f_num;
					position: relative;
					color: #fff;
					&:before {
						content: '';
						width: 17px;
						height: 23px;
						background: url(../images/header/ic_tel_h.png) no-repeat center;
						background-size: 100%;
						position: absolute;
						top: 5px;
						left: -18px;
					}
				}
			}
			.mail_h {
				float: left;
				margin-left: 25px;
				margin-top: 3px;
				@include mq(max_w, 1260px) {
					margin-top: 6px;
					margin-left: 15px;
				}
				.btn_gold {
					a {
						font-size: .9em;
						width: 200px;
						@include mq(max_w, 1260px) {
							width: 42px;
							height: 38px;
							position: relative;
							&:after {
								display: none;
							}
							&:before {
								content: '';
								width: 23px;
								height: 20px;
								background: url(../images/header/ic_mail_h.png) no-repeat center;
								background-size: 100%;
								position: absolute;
								top: 8px;
								left: 8px;
							}
						}
						&:hover {
							color: #fff;
							border: 1.5px solid #fff;
						}
						span {
							position: relative;
							@include mq(max_w, 1260px) {
								display: none;
							}
							&:before {
								content: '';
								width: 18px;
								height: 15px;
								background: url(../images/header/ic_mail_h.png) no-repeat center;
								background-size: 100%;
								position: absolute;
								top: 2px;
								left: -23px;
							}
						}
					}
				}
			}
		}
	}
}

<div id="gnav_fix" class="view_pc">
	<div class="wrap">
		<ul>
			<li class="gnav_top"><a href="<?php echo LOCATION?>"><span>TOP</span></a></li>
			<li class="gnav_rooms"><a href="<?php echo LOCATION?>rooms/"><span>お部屋タイプ・設備</span></a></li>
			<li class="gnav_dining"><a href="<?php echo LOCATION?>dining/"><span>食事について</span></a></li>
			<li class="gnav_outline"><a href="<?php echo LOCATION?>outline/"><span>物件概要・アクセス</span></a></li>
			<li class="gnav_availability"><a href="<?php echo LOCATION?>availability/"><span>空室情報</span></a></li>
		</ul>
		<div class="contact_h view_pc">
			<p class="tel_h"><span class="jp">お電話でのお問い合わせ</span><br><span class="tel">052-228-0144</span></p>
			<div class="mail_h">
				<p class="btn btn_gold"><a href="<?php echo LOCATION?>contact/"><span>メールでのお問合せ</span></a></p>
			</div>
		</div>
	</div>
</div><!-- /#gnav_fix -->

$(window).scroll(function () {
	var windowW = (window.innerWidth||document.documentElement.clientWidth||0);
	if ($(this).scrollTop() > 500 && windowW > 736) {
		#gnav_fix').fadeIn();
	} else {
		$('#gnav_fix').fadeOut();
	}
});