How to make the effect of a div that covers an other div when scrolling?

$("#home").stopBG(0, 12, 300);

Plugin Name:    smoothScroll for jQuery.
Written by:     Okler Themes - (http://www.okler.net)
Version:        3.1.0

blurEffectView.frame = self.navigationController!.view.bounds
self.navigationController!.view.addSubview(blurEffectView)

 //IIF to avoid polluting global namespace
 (function() {

   $(function() {
     //S1 - add click handler to each menu item
     $("#pointer > a").each(function(k, v) {
       $(v).click(function(e) {
         //S2 - build target div id using hash from clicked menu item
         var targetId = 'target-' + e.originalEvent.currentTarget.hash.slice(1);
         //S3 - scroll document to top offset of target div
         $('body').scrollTop($('#' + targetId).offset().top);
         //S4 - apply menu rendering effects _without_ taking deltaY into account
         myEffectsClick(e);
       });
     });

     $(window).on('wheel', function(e) {
       myEffectsScroll(e);
     });
   });
   //no deltaY since we're not scrolling
   function myEffectsClick(e) {
       var windowScrollTop = $(this).scrollTop();
       //'reset' menu as if we had scrolled up
       scrollUp(windowScrollTop);
       //add any applicable effects based on current position
       scrollDown(windowScrollTop);
     }
     //apply effects when scrolling

   function myEffectsScroll(e) {
     var delta = e.originalEvent.deltaY;
     var windowScrollTop = $(this).scrollTop();

     if (delta > 0) {
       //scroll-down
       scrollDown(windowScrollTop);
     } else {
       //scroll-up
       scrollUp(windowScrollTop);
     }
   }



   function scrollUp(windowScrollTop) {
     if (windowScrollTop < 350) {
       $(".two").css("border-top-color", "#999999").animate({
         width: '25px'
       }, 100);
     }
     if (windowScrollTop < 750) {
       $(".three").css("border-top-color", "#999999").animate({
         width: '25px'
       }, 100);
     }
     if (windowScrollTop < 1150) {
       $(".four").css("border-top-color", "#999999").animate({
         width: '25px'
       }, 100);
     }
     if (windowScrollTop < 1500) {
       $(".one, .two, .three, .four, .five").css("border-top-color", "#fff");
       $(".five").animate({
         width: '25px'
       }, 100);
       $("body").css('background-color', '#003333');
     }
   }

   function scrollDown(windowScrollTop) {
     if (windowScrollTop > 0) {
       $(".one").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 350) {
       $(".two").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 750) {
       $(".three").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 1150) {
       $(".four").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 1500) {
       $(".one, .two, .three, .four, .five").css("border-top-color", "#999999");
       $(".five").animate({
         width: '50px'
       }, 100);
       $("body").css('background-color', '#fff');
     }
   }


 }());

body {
  background-color: #003333;
}
#pointer {
  position: fixed;
  top: 50%;
  left: 50px;
}
#pointer span {
  display: block;
  height: 13px;
  width: 25px;
  border-top-color: #999999;
  border-top-style: solid;
  border-top-width: 1px;
}
div.scroll-target {
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="height:200px">Test.</div>
<div id="pointer">
  <a href="#first"><span class="one"></span></a>
  <a href="#second"><span class="two"></span></a>
  <a href="#third"><span class="three"></span></a>
  <a href="#fourth"><span class="four"></span></a>
  <a href="#areaTest"><span class="five"></span></a>
</div>
<div>
  <div id="target-first" class="scroll-target">
    T1
  </div>
  <div id="target-second" class="scroll-target">
    T2
  </div>
  <div id="target-third" class="scroll-target">
    T3
  </div>
  <div id="target-fourth" class="scroll-target">
    T4
  </div>
</div>
<div style="height:2000px">So that we can scroll...</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>

$("#thisdiv").niceScroll({
    mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
});