title: Transparent Navigation Bar with blur TableView Scroll Offset
body: <p>I am trying to create this effect.</p>
  
  <p>Blur effect only on the scroll offset view</p>
  
  <p><a href="https://i.stack.imgur.com/HZIGD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZIGD.png" alt="enter image description here"></a></p>
  
  <p>I tried to do this programmatically as follows</p>
  
  <pre><code>- (void)addBlurEffect {
      // Add blur view
      //    CGRect statusBarViewRect = [[UIApplication sharedApplication] statusBarFrame];
      CGRect bounds = self.bounds;
  
      /*to extwnd from status bar till the end of navigation bar height*/
      CGRect aRect = CGRectMake(0, self.frame.origin.y-40, self.frame.size.width, bounds.size.height+20);
  
      /*Make a blur view*/
      UIVisualEffectView *visualView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
  
      /*Assign a tag to make it accessable from view hirarchy*/
      visualView.tag = 10000;
  
      visualView.frame = aRect;
      visualView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
      [self addSubview:visualView];
      self.backgroundColor = [UIColor colorWithRed:42.0f green:152.0f blue:231.0f alpha:0.7f];
      [self sendSubviewToBack:visualView];
  
      /*back button was disabled following enables it*/
      visualView.userInteractionEnabled = false;
  } 
  </code></pre>
  
  <p>i am not able to recreate the UI. this is what i get 
  <a href="https://i.stack.imgur.com/YJv4I.gif" rel="nofollow noreferrer">UIEffectView adds a gradient effect.</a></p>
  
  <p>a gradient effect and not a clear view. how shall i recreate the required UI effect?</p>