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

스크롤하는동안 따라다니는 배너가 푸터영역에서 멈추는 코드입니다.

<main>
  <div id="content"></div>
  <footer>footer</footer>
  <div id="banner">
    banner
  </div>
</main>

 

* {
  margin:0;
  padding:0;
}

main {
  position:relative;
}

#content {
  height: 1500px;
}

footer {
  background: #333;
  height: 300px;
  font-size: 30px;
  color: #fff;
}

#banner {
  position: fixed;
  right: 20px;
  bottom: 50px;
  width: 50px;
  height: 100px;
  background: salmon;
  box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

#banner.on {
  position: absolute;
  bottom: 350px;
}

 

$(function() {

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

  $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')

  });

});

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/63m04rf9/