Display line of threshold for scroll-based animation. When element is between the line, it will be affected. Need GreaseMonkey / Tampascript and Stylish plugins.

jthreshold-scroll.user.css

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document regexp("http://localhost/([a-zA-Z0-9_/])+") {
  .jgrid {
    position: fixed;
    z-index: 999998;
    top:0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
  }
  .jgrid > .topwindow {
    position: absolute;
    z-index: 999999;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: #ED0080 1px solid;
    background-color: rgba(237,0,128,0.1);
  }
  .jgrid > .bottomwindow {
    position: absolute;
    z-index: 999999;
    left: 0;
    width: 100%;
    height: auto;
    border-top: #ED0080 1px solid;
    background-color: rgba(237,0,128,0.1);    
  }  
}

jthreshold-scroll.user.js

// ==UserScript==
// @name        jthreshold-scroll
// @namespace   jthreshold-scroll
// @include     http://localhost/*
// @version     1
// @grant       none
// @require     https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js
// ==/UserScript==

/* // @require     https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js */
$(document).ready(function () {
  
  var displayManager = function (device, threshold) {
    
    var bottomWindow = $(window).height() - threshold;
    var topWindow = threshold;

    if ($(".jgrid").length == 0) {
      $("body").append($("<div class='jgrid'></div>"));
      $(".jgrid").append($("<div class='topwindow'></div>"));
      $(".jgrid").append($("<div class='bottomwindow'></div>"));
      $(".topwindow").css({ "top": 0 + "px", "height": topWindow +"px" });
      $(".bottomwindow").css({ "top": bottomWindow + "px", "height": bottomWindow +"px"  });
    }
    
    console.info('init jthreshold-scroll with threshold of ' + threshold + 'px');
    return true;
  }
  
  var mobile = false;
  displayManager(mobile,200);
});