플로팅 배너 푸터에서 멈추기

.up { 
	position: fixed;
	display: flex;
	flex-direction: column; 
	right: 4%; 
	top: 85%; 
	transform: translateY(-50%);
	z-index: 5;
}
.up .shop {
	display: inline-block;
	width: 68px;
	height: 68px;
	border-radius: 100px;
	background-color: #507130;
	color: white;
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	line-height: 68px;
	text-align: center;
	margin-bottom: 15px;
}
.up .top {
	display: inline-block;
	width: 68px;
	height: 68px;
	border-radius: 100px;
	background-color: #1B1B1B;
	color: white;
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	line-height: 68px;
	text-align: center;
}
 .up .top::after {
	content: '';
	width: 100px;
	height: 100px;
	background: url(./../images/main/패스\ 18@2x.png) no-repeat;
	position: absolute;
	bottom: -30%;
	left: 42%;
}

피건 플로팅 css입니다

 <div class="up">
        <a href="#" class="shop">shop</a>
        <a href="#" class="top">top</a>
    </div>

이게 플로팅 배너이구요 

<footer id="footer">

푸터는 아이디로 줬습니다

$(function() {

  var $w = $(window),
    footerHei = $('#footer').outerHeight(),
    $banner = $('up');

  $w.on('scroll', function() {

    var sT = $w.scrollTop();
    var val = $(document).height() - $w.height() - footerHei;

    if (sT >= val)
        $banner.addClass('on')
    else
    		$banner.removeClass('on')

  });

})

스크립트 이렇게 줬는데 왜 푸터에서 안멈출까요 ㅜㅜ'아니면 다른 좋은 코드 있으시면

알려주시면 정말정말 감사하겠습니다 !!!!