Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <header>
    Fixed header shown when user scrolls up.
  </header>
​
  <p>Marfa 3 wolf moon tattooed taxidermy gentrify XOXO, kitsch DIY 8-bit. Vinyl polaroid readymade Carles, cardigan Tonx +1 disrupt.  Small batch disrupt master cleanse, Echo Park PBR&amp;B taxidermy cred Schlitz plaid. VHS vegan asymmetrical, wolf mustache banjo Tonx. Vegan meh vinyl PBR&amp;B chillwave, synth stumptown heirloom. Carles asymmetrical tofu distillery, cardigan art party Odd Future selvage. Kitsch craft beer Neutra, street art beard tousled Cosby sweater ugh food truck Truffaut narwhal viral ennui.</p>
  
  <p>Godard seitan master cleanse, kogi roof party vegan cray fashion axe butcher bespoke you probably haven't heard of them vinyl.  Drinking vinegar Bushwick fap retro distillery.  Helvetica tilde 3 wolf moon, retro swag wolf raw denim hoodie hella Pinterest authentic vinyl trust fund. Cred Cosby sweater PBR High Life keffiyeh tattooed farm-to-table, chia vinyl Pitchfork food truck wayfarers kale chips chambray. Cray fixie hoodie post-ironic lo-fi.  Williamsburg Etsy selvage narwhal Shoreditch meditation, kitsch Odd Future swag hella squid. Craft beer DIY biodiesel XOXO, bicycle rights typewriter selvage Marfa direct trade  meh organic meggings.</p>
  
  <p>Fashion axe Echo Park chillwave bitters, Pinterest meditation drinking vinegar cred Godard master cleanse hashtag. Meh irony Bushwick Austin dreamcatcher +1, gentrify chia blog Godard next level lo-fi four loko food truck. Umami messenger bag Blue Bottle fashion axe Williamsburg put a bird on it, heirloom health goth Marfa crucifix keffiyeh four loko. Meggings cliche vegan chia, mixtape 90's quinoa art party Wes Anderson swag. Chambray pop-up sustainable, mlkshk Schlitz skateboard Brooklyn disrupt messenger bag typewriter Helvetica literally Tumblr stumptown. YOLO quinoa brunch trust fund, keffiyeh cornhole leggings DIY 3 wolf moon 90's ethical Vice Odd Future church-key. Carles tofu brunch next level ugh, readymade fingerstache.</p>
  
  <p>Taxidermy Williamsburg chia, Marfa umami crucifix ennui Cosby sweater keytar fanny pack XOXO. Food truck High Life Godard, +1 salvia Intelligentsia Vice brunch fap semiotics mustache selfies normcore. Flexitarian mumblecore art party, kitsch craft beer bitters Portland tattooed typewriter cold-pressed ethical pickled. Asymmetrical salvia fixie, stumptown Helvetica vinyl lo-fi normcore photo booth Pinterest meh retro Wes Anderson. Authentic meditation ethical cold-pressed. Tonx mixtape Helvetica butcher banjo, Brooklyn plaid fingerstache Truffaut stumptown. Truffaut meditation next level hashtag mlkshk.</p>
  
  <p>American Apparel fingerstache ethical, chillwave YOLO Vice Marfa church-key Truffaut polaroid Etsy PBR Bushwick bicycle rights Blue Bottle. You probably haven't heard of them heirloom gastropub artisan Pitchfork PBR. Retro hella Bushwick, church-key Portland wayfarers fingerstache you probably haven't heard of them gastropub bitters readymade cray Pitchfork. Letterpress blog seitan, tofu quinoa photo booth shabby chic asymmetrical banjo try-hard authentic semiotics. Disrupt banh mi freegan shabby chic YOLO tousled slow-carb, flexitarian Truffaut. Tote bag keffiyeh ennui chia sartorial, drinking vinegar mixtape occupy Intelligentsia Echo Park asymmetrical Shoreditch.  Vice PBR&amp;B literally, 90's Etsy leggings pickled fanny pack twee street art Austin salvia.</p>
  
  <p>Intelligentsia locavore hella paleo iPhone typewriter. Fap Echo Park kitsch deep v, 3 wolf moon you probably haven't heard of them Thundercats beard hashtag small batch messenger bag organic Williamsburg aesthetic biodiesel. +1 Wes Anderson Portland cardigan.  Typewriter Cosby sweater fashion axe Brooklyn PBR.  Sriracha gluten-free fingerstache hella asymmetrical XOXO, freegan farm-to-table Tonx locavore PBR&amp;B yr.  Keffiyeh put a bird on it single-origin coffee fixie cold-pressed sriracha, Truffaut +1 cred. Quinoa fashion axe lo-fi normcore wayfarers.</p>
  
  <p>Seitan forage salvia Intelligentsia Brooklyn.  Cray tofu Etsy, squid Godard photo booth pickled messenger bag. Narwhal meh single-origin coffee wayfarers paleo 8-bit. Kale chips YOLO post-ironic distillery small batch. Meh tousled chillwave, kale chips keffiyeh Tonx farm-to-table jean shorts paleo Helvetica whatever seitan. Distillery ugh narwhal readymade, iPhone hoodie letterpress church-key meditation mumblecore seitan gastropub messenger bag Schlitz. Polaroid pour-over brunch ennui.</p>
  
  <p>Authentic slow-carb Cosby sweater, pop-up Carles Pinterest sustainable skateboard wayfarers. Neutra freegan umami messenger bag swag, keytar yr Kickstarter paleo ugh church-key semiotics lo-fi Pinterest bitters.  Polaroid ethical Schlitz, post-ironic mixtape Wes Anderson asymmetrical VHS irony skateboard cred. Hoodie Carles drinking vinegar gentrify, tofu kitsch next level health goth church-key hella hashtag keffiyeh meh typewriter meggings.  Chambray lo-fi taxidermy, pop-up McSweeney's banjo paleo gentrify. Cliche vinyl PBR&amp;B pop-up, flexitarian next level you probably haven't heard of them wolf normcore organic. Asymmetrical wolf mumblecore occupy, cornhole drinking vinegar viral banjo ethical Helvetica Banksy.</p>
  
  <p>Cold-pressed retro street art Shoreditch, occupy master cleanse Odd Future swag meggings paleo crucifix distillery DIY. Salvia direct trade  Wes Anderson next level master cleanse, tousled authentic tote bag Etsy cray Carles church-key synth Schlitz distillery. Viral cornhole normcore, Neutra banjo kogi tilde cred next level. Brunch Pinterest PBR&amp;B, gentrify cray swag selfies food truck. Meh tilde put a bird on it, keffiyeh retro Banksy sriracha flannel kitsch wolf. Heirloom craft beer artisan kale chips blog mlkshk. Retro selfies literally, seitan chambray pork belly you probably haven't heard of them shabby chic semiotics mumblecore trust fund beard ethical.</p>
​
  <p>Cold-pressed dreamcatcher fanny pack iPhone. Fap Kickstarter Cosby sweater, yr scenester wayfarers pork belly retro messenger bag gentrify Intelligentsia Bushwick tote bag. Freegan squid hashtag, viral tofu butcher PBR&amp;B. Kitsch direct trade  selvage authentic Tonx jean shorts street art tattooed mumblecore bespoke crucifix. XOXO lomo sustainable art party Godard DIY. High Life 3 wolf moon farm-to-table, +1 craft beer sustainable forage you probably haven't heard of them gentrify vinyl normcore. Single-origin coffee Bushwick Tumblr drinking vinegar.</p>
​
  <p>Banh mi next level kitsch mlkshk. Mlkshk blog Pitchfork McSweeney's. Normcore freegan wolf XOXO Bushwick meditation artisan DIY. Scenester synth vegan semiotics, wayfarers narwhal PBR Neutra disrupt direct trade  +1 stumptown pork belly Odd Future ennui. Kitsch gentrify locavore roof party skateboard hoodie. Wes Anderson drinking vinegar hashtag tilde Banksy viral. Butcher wolf drinking vinegar swag street art.</p>
​
  <p>Truffaut lo-fi readymade +1 ennui, Pinterest sriracha organic plaid synth. Meggings disrupt kitsch Intelligentsia Brooklyn iPhone, meh mustache biodiesel Etsy paleo Austin wolf. Chia meggings bitters, literally gluten-free forage freegan asymmetrical. Banjo put a bird on it deep v, semiotics brunch farm-to-table PBR master cleanse Godard pork belly Etsy craft beer kogi meggings chia. Synth letterpress sriracha you probably haven't heard of them street art. Plaid food truck vinyl, umami hoodie sriracha skateboard lomo hashtag Tonx whatever artisan McSweeney's next level. PBR&amp;B aesthetic keytar deep v, biodiesel cred tilde try-hard Blue Bottle banjo narwhal Etsy.</p>
  
  <footer>
    <b id="y">0</b>
    <b id="pivot">0</b>
    <b id="diff">0</b>
    <b id="dir">down</b>
  </footer>
</body>
</html>
 
header
  background: red
  left: 0
  padding: 1em
  position: absolute
  right: 0
  top: 0
​
[scroll-intent="up"]
  header
    position: fixed
  
body
  padding-top: 50px
​
footer
  position: fixed
  bottom: 0
  
footer b
  display: inline-block
  padding: 10px
  background: #CCF
  border: 1px solid black
​
 
​
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.scrollIntent = factory());
}(this, (function () { 'use strict';
​
                      
var $y = $('#y');
var $pivot = $('#pivot');
var $diff = $('#diff');
var $dir = $('#dir');
var debugOutput = function(y, pivot, diff, dir) {
  $y.html(y)
  $pivot.html(pivot);
  $diff.html(diff)
  $dir.html(dir);
}
// debugOutput(y, pivot, 0, dir);
// debugOutput(y, pivot, Math.abs(y - pivot), dir);
​
​
/* global $ */
​
//
// scrollIntent
//
// Sets html[scroll-intent="up"] or html[scroll-intent="down"]
//
var $document = $(document);
var $html = $('html');
var $window = $(window);
var historyLength = 32; // Ticks to keep in history.
var historyMaxAge = 512; // History data time-to-live (ms).
var thresholdPixels = 64; // Ignore moves smaller than this.
var history = Array(historyLength);
var dir = 'down'; // 'up' or 'down'
var e = void 0; // last scroll event
var pivot = void 0; // "high-water mark"
var pivotTime = 0;
​
var tick = function tickFunc() {
  var y = $window.scrollTop();
  var t = e.timeStamp;
  var furthest = dir === 'down' ? Math.max : Math.min;
​
  // Apply bounds to handle rubber banding
  var yMax = $document.height() - $window.height();
  y = Math.max(0, y);
  y = Math.min(yMax, y);
​
  // Update history
  history.unshift({ y: y, t: t });
  history.pop();
​
  // Are we continuing in the same direction?
  if (y === furthest(pivot, y)) {
    // Update "high-water mark" for current direction
    pivotTime = t;
    pivot = y;
    debugOutput(y, pivot, 0, dir);
    return;
  }
  // else we have backed off high-water mark
​
  // Apply max age to find current reference point
  var cutoffTime = t - historyMaxAge;
  if (cutoffTime > pivotTime) {
    pivot = y;
    for (var i = 0; i < historyLength; i += 1) {
      if (!history[i] || history[i].t < cutoffTime) break;
      pivot = furthest(pivot, history[i].y);
    }
  }
​
  // Have we exceeded threshold?
  if (Math.abs(y - pivot) > thresholdPixels) {
    pivot = y;
    pivotTime = t;
    dir = dir === 'down' ? 'up' : 'down';
    $html.attr('scroll-intent', dir);
  }
  debugOutput(y, pivot, Math.abs(y - pivot), dir);
};
​
var handler = function handlerFunc(event) {
  e = event;
  window.requestAnimationFrame(tick);
};
​
function scrollIntent(o) {
  if (o === 'off') return $window.off('scroll', handler);
  pivot = $window.scrollTop();
  $html.attr('scroll-intent', dir);
  return $window.on('scroll', handler);
}
​
var plugin = window.$ || window.jQuery || window.Zepto;
if (plugin) {
  plugin.fn.extend({
    scrollIntent: function scrollIntentFunc(o) {
      return scrollIntent(o);
    }
  });
} else {
  throw Error('scroll-intent requires jQuery or Zepto');
}
​
return scrollIntent;
​
})));
​
​
​
$(window).scrollIntent();
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers