画面をscrollすると表示されて「閉じるボタン」で非表示になるバナー

デモページへopen_in_new

JSとfont-awesomeを読み込みます

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

[main.js]JavaScript

(function($) {

$(function () {
    var display = function () {
    if ($(this).scrollTop() > 150) { //scroll量
            $(".Bnr").fadeIn();
        } else {
            $(".Bnr").fadeOut();
        }
    };
    $(window).on("scroll", display);
    //click
    $(".Bnr p.close a").click(function(){
    $(".Bnr").fadeOut();
    $(window).off("scroll", display);
    });
});

})(jQuery);

HTMl

<div class="Bnr">
<div class="Bnr__img">
<div class="Bnr__img__inner">
<a href="">
<p>ココにバナーとかコンテンツをいれます。</p>
</a>
<!-- /.Bnr__img__inner --></div>
<p class="close"><a href="javascript:void(0)"><span>閉じる</span><i aria-hidden="true" class="fa fa-times"></i></a></p>
<!-- /.Bnr__img --></div>
<!-- /.Bnr --></div>

CSS

/* Bnr
-----------------------------------------*/
.Bnr{
  position: relative;
  margin: 0 auto;
  width: 1200px;
  display: none;
  font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,sans-serif !important;
}
.Bnr .Bnr__img{
  position: fixed;
  bottom: 0;

  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  z-index: 88;
}
.Bnr__img__inner{
  width: 1200px;
  height: 80px;
  box-sizing:border-box;
  padding: 10px;
  background-color: #fafafa;
}
.Bnr .Bnr__img__inner a{
  display: block;
}
.Bnr .Bnr__img p.close{
  position: absolute;
  right: 10px;
  top:10px;
}
.Bnr .Bnr__img p.close a{
  display: block;
  width: 20px;
  height: 25px;
  text-align: center;
}
.Bnr .Bnr__img p.close a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Bnr .Bnr__img p.close a i{
  font-size: 20px;
  z-index: 888;
  color: #222;
}