JQuery フッター固定バナー

一番上では非表示で、スクロールするとふわっと表示される固定フッターバーナー。

 

HTML

<footer><a href="#" target="_blank"><img src="img/banner.png" title="" alt=""></a></footer>

 

CSS

footer{
    width: 100%;
    background:rgba(0,0,0,0.7);
    color: #fff;
    line-height:1;
    text-align: center;
    padding:0;
    position:fixed;
    bottom: 0;
	display:none;
}

 

jQuery

$(function(){
  $(window).on('scroll', function(){
    if ($(window).scrollTop() > 300) {
      $('footer').fadeIn(400);
    } else {
      $('footer').fadeOut(400);
    }
  });
});