.box {
  position: relative;
  width: 400px;
  height: 150px;
  overflow-y: scroll;
  color: black;
}

.overlay {
  position: fixed;
  width: 80px;
  height: 80px;
  top: 50px;
  left: 100px;
  border: 2px solid red;
  background-color: blue;
  mix-blend-mode: screen;
}

<div class="box">
  <div class="overlay">
  </div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi excepturi explicabo, animi et voluptatibus molestiae earum tempora ad perspiciatis accusantium impedit voluptates. Veritatis ex, officia velit maiores provident quasi dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, commodi. Repellat dolore id repudiandae, harum quae perferendis, illum eum perspiciatis, cupiditate autem sapiente consectetur obcaecati et incidunt! Enim voluptas repellat reprehenderit voluptates perspiciatis quam repellendus reiciendis neque sed culpa deleniti, labore rerum non esse aut architecto earum illum sit accusamus ratione inventore dicta debitis, voluptatem ipsam iure. Quas, quae recusandae! Assumenda, nihil vero iusto iure. Dolores numquam libero odio assumenda nulla repudiandae quibusdam optio, aspernatur eligendi, ex, aliquid accusantium recusandae, asperiores laboriosam nemo. Obcaecati explicabo distinctio, mollitia fuga non ducimus harum facere, eos nisi sapiente eligendi, in quis sint laudantium ullam iusto id officia consequatur. Fugit aliquam expedita facilis harum libero id quaerat placeat nobis? Officiis fugit eos sint vero repellendus cum maxime aperiam, officia illo at tempore adipisci nulla quo consequuntur et nesciunt repudiandae consequatur enim, rem modi quaerat totam. Officia nihil velit totam placeat tempora, voluptates necessitatibus suscipit eligendi praesentium cupiditate enim magnam blanditiis aut? Reiciendis quaerat fugit expedita aperiam, veritatis provident error, quasi eos dignissimos dicta est, quidem, sequi. Corporis tempore odit modi, repellendus, adipisci mollitia est rerum. Harum inventore ab praesentium optio ea quis molestiae tempore quidem aut dolores alias, officia, autem voluptates eaque illo dolorem, laboriosam nobis eos. Quam odit, atque voluptate unde molestiae pariatur a nostrum consequuntur alias veniam soluta nihil officiis libero cum impedit dignissimos vero similique ratione cupiditate et quibusdam omnis esse nulla, facilis! Magnam dolorem molestias cumque fugiat, voluptatum atque possimus perferendis inventore dolore, nihil, asperiores eligendi ab est, illo placeat dolor aliquid ex quod. Culpa porro, minus id neque asperiores cum corrupti esse, est, excepturi ratione, in ut repudiandae. Blanditiis nisi nobis voluptatum omnis doloribus illum totam, aliquam asperiores optio repudiandae provident mollitia aspernatur, sunt perspiciatis rem expedita ad maxime illo, quaerat a impedit. Voluptas quia ipsum odit sint placeat itaque totam dolorem eaque aliquam numquam, consequatur nulla fuga ipsam suscipit voluptate pariatur incidunt minus blanditiis, magni ullam nisi id a. Quisquam neque minus officia reiciendis vel vitae tempore hic labore dicta mollitia, quis rem suscipit consequatur porro corrupti ullam atque reprehenderit odio obcaecati quo, placeat dolore nemo nostrum soluta eius! Consequatur neque voluptates reprehenderit, deserunt commodi aperiam mollitia veniam quisquam deleniti fugiat. Ea omnis accusamus rerum veniam vero laudantium saepe impedit pariatur voluptas esse illum labore est quia sint, vel culpa, soluta ex? Dicta molestiae fugiat, eveniet, sit excepturi sequi accusamus debitis maiores quaerat reprehenderit similique vero enim, nesciunt!
</div>

$.fn.glassify = function(options) {
    
    
  var $glass = $("<div class='glass'>").insertAfter(this);
  var $wrapper = $("<div class='wrapper'>").appendTo($glass);
  
  // Make a copy of the paragraph:
  $(this).clone().appendTo($wrapper);
  
  var pos = $.extend({
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  }, options );
  
  
  $glass.css('top', pos.top);
  $glass.css('right', pos.right);
  $glass.css('bottom', pos.bottom);
  $glass.css('left', pos.left);
  
  $wrapper.css('top', -pos.top);
  $wrapper.css('right', -pos.right);
  $wrapper.css('bottom', -pos.bottom);
  $wrapper.css('left', -pos.left);
};

$("p").glassify({
  
  top: 50,
  right: 100,
  bottom: 20,
  left: 200
});

.container {
  position: relative;
}

.glass {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  outline: 1px solid red;
  color: blue;
  overflow: hidden;
}

.wrapper {
  position: absolute;
}

p {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis auctor ex. Maecenas ut nisl justo. Etiam vitae velit vitae libero congue aliquet at non ipsum. Donec pulvinar risus at pellentesque rhoncus. Vestibulum vitae nibh sit amet sem facilisis pellentesque. Phasellus condimentum pellentesque neque, at tincidunt lacus mollis tincidunt. Mauris vestibulum leo et libero lobortis pharetra. Aliquam sagittis felis molestie sapien rhoncus dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc posuere in orci sit amet ullamcorper. Fusce tempor sem eget aliquam efficitur. Suspendisse sagittis facilisis eros eget semper. Curabitur feugiat, quam eu aliquam vulputate, tellus odio scelerisque neque, a sodales est ligula in magna. Nullam vehicula eleifend dolor eget venenatis. Fusce tempus elit sit amet rutrum mattis.
  </p>
</div>