<div class="stage">
  <div class="container">
    <h1>
      CSS Gradient Scroll Shadow
    </h1>
    <p class="lead">
      Display shadows on top and bottom of a container when scrolling. Works with form elements.
    </p>
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">
          Email address
        </label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">
          Password
        </label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox">
          Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">
        Sign in
      </button>
    </form>
    <p>
      Qapla. Dah tlhingan hol mu ghom a dalegh. Qawhaqvam chenmohlu di wiqipe diya ohvad ponglu. Ach jinmolvamvad Saghbe law tlhingan hol, dis, oh mevmohlu. Ach dis jar wa mahcha dich wikia jinmoldaq vihta. Hov lengvad chenmohlu tlhingan hol e ej dah oh ghojtah
      ghot law. Qapbej holvam wicha meh, qawhaqvam chenmohlu . Tahjaj wo, tahjaj hol Sov qawhaq tlhab oh ej ghitlhmey diqonmeh tlhingan hol wilo. Ghitlhmey chenmohlah ej chohlah tlhingan hol jatlhlahbogh hoch ghotpu e. Wej tin Sov qawhaqvam, ach ghurli
      e witul. Dah ghitlhmey ngas. Vay daghel danehchugh, vaj tachdaq maghom.
    </p>
    <p>
      Qapla. Dah tlhingan hol mu ghom a dalegh. Qawhaqvam chenmohlu di wiqipe diya ohvad ponglu. Ach jinmolvamvad Saghbe law tlhingan hol, dis, oh mevmohlu. Ach dis jar wa mahcha dich wikia jinmoldaq vihta. Hov lengvad chenmohlu tlhingan hol e ej dah oh ghojtah
      ghot law. Qapbej holvam wicha meh, qawhaqvam chenmohlu . Tahjaj wo, tahjaj hol Sov qawhaq tlhab oh ej ghitlhmey diqonmeh tlhingan hol wilo. Ghitlhmey chenmohlah ej chohlah tlhingan hol jatlhlahbogh hoch ghotpu e. Wej tin Sov qawhaqvam, ach ghurli
      e witul. Dah ghitlhmey ngas. Vay daghel danehchugh, vaj tachdaq maghom.
    </p>
  </div>
</div>

@import url("//fonts.googleapis.com/css?family=Open+Sans");
@import url("//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css");

/* BASIC */

body {
  background: #EEE;
  color: #000;
  font: 14px/1.5 "Open Sans", sans-serif;
}

.stage {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* SCROLL SHADOW */

.container {
  position: relative;
  height: 200px;
  overflow: auto;
  border: 1px solid #aaa;
  padding: 15px;
  background-color: #FFF;
}

.container form {
  margin-bottom: 15px;
}

.container h1 {
  margin-top: 0;
}

.shadow-top {
  height: 20px;
  position: absolute;
  background-image: radial-gradient(farthest-side at 50% 0%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  display: none;
}

.shadow-bottom {
  height: 20px;
  position: absolute;
  background-image: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  display: none;
}

var scrollShadow = (function() {
  var elem, width, height, offset,
    shadowTop, shadowBottom,
    timeout;

  function initShadows() {
    shadowTop = $("<div>")
      .addClass("shadow-top")
      .insertAfter(elem);
    shadowBottom = $("<div>")
      .addClass("shadow-bottom")
      .insertAfter(elem);
  }

  function calcPosition() {
    width = elem.outerWidth();
    height = elem.outerHeight();
    offset = elem.position();

    // update 
    shadowTop.css({
      width: width + "px",
      top: offset.top + "px",
      left: offset.left + "px"
    });
    shadowBottom.css({
      width: width + "px",
      top: (offset.top + height - 20) + "px",
      left: offset.left + "px"
    });
  }

  function addScrollListener() {
    elem.off("scroll.shadow");
    elem.on("scroll.shadow", function() {
      if (elem.scrollTop() > 0) {
        shadowTop.fadeIn(125);
      } else {
        shadowTop.fadeOut(125);
      }
      if (elem.scrollTop() + height >= elem[0].scrollHeight) {
        shadowBottom.fadeOut(125);
      } else {
        shadowBottom.fadeIn(125);
      }
    });
  }

  function addResizeListener() {
    $(window).on("resize.shadow", function() {
      clearTimeout(timeout);
      timeout = setTimeout(function() {
        calcPosition();
        elem.trigger("scroll.shadow");
      }, 10);
    });
  }

  return {
    init: function(par) {
      elem = $(par);
      initShadows();
      calcPosition();
      addScrollListener();
      addResizeListener();
      elem.trigger("scroll.shadow");
    },
    update: calcPosition
  };

}());

// start
scrollShadow.init(".container");