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>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Crete+Round:400,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,700,900,500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,300,200,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<!-- 1. pridat issue link v #home p
2. pridat github download link
3. pridat bower install nazov 
4. Dorobit scrolling duration -->
<!-- START Home Section -->
<div class="content-wrapper">
    <div id="home" class="scrollto">
        <div class="wider wrap">
            <div class="roof">
            </div>
            <i class="fa fa-bars"></i>
            <h1 class="logo">stickyNavbar.js</h1>
            <h2>Fancy sticky navigation jQuery plugin with smart anchor links highlighting</h2>
            <p>
                stickyNavbar.js is a jQuery plugin that helps you stick your navigation bars to the top of the browser window during scrolling. It could stop right here but stickyNavbar.js offers more: you can use your favourite jQuery effects or even fantastic Animate.CSS library to spice up your navigation. The plugin offers lot of options to suit everyone's needs.<br>
                Found a bug or need a help? Open an issue on <a href="http://www.github.com/jbutko/stickyNavbar">github</a>.<br>
                Developed and maintained by <a href="http://www.jozefbutko.com">Jozef Butko</a> under MIT Licence.
            </p>
        </div>
        <!-- <i class="fa fa-hand-o-down fa-4x"></i> -->
        <p class="hand-font align-center">
            Scroll down under the navigation bar to see stickyNavbar.js in action!<span class="glyphicon glyphicon-chevron-down wobble slideDown"></span>
        </p>
    </div>
    <!-- End #home -->
    <!-- START Header Nav -->
    <div id="header" class="header">
        <div id="nav">
            <ul class="nav navbar-nav">
                <li class="menuItem">
                <a href="#home">Home</a>
                </li>
                <li class="menuItem">
                <a href="#download">Download</a>
                </li>
                <li class="menuItem">
                <a href="#setup">Setup</a>
                </li>
                <li class="menuItem">
                <a href="#markup">HTML</a>
                </li>
                <li class="menuItem">
                <a href="#CSS">CSS</a>
                </li>
                <li class="menuItem">
                <a href="#jquery">jQuery</a>
                </li>
                <li class="menuItem">
                <a href="#options">Options</a>
                </li>
                <li class="menuItem">
                <a href="#credits">Credits</a>
                </li>
                <li class="menuItem">
                <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- End #nav -->
    </div>
    <!-- End #header -->
    <!-- START Download -->
    <div id="download" class="scrollto">
        <div class="wrap">
            <h2>1. Download</h2>
            <p>
                As a first step download stickyNavbar.js from GitHub:
            </p>
            <pre class="brush: html">
                 Downlod links goes here:
            </pre>
            <p>
                Or get the package from Bower:
            </p>
            <pre class="brush: bash">
                 bower install stickyNavbar
            </pre>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End #download -->
    <!-- START Setup -->
    <div id="setup" class="scrollto">
        <div class="wrap">
            <h2>2. Setup</h2>
            <p>
                Include reference to jQuery library, jQuery easing plugin (optional), animate.CSS (optional) and stickyNavbar itself at the bottom of the page before the closing <code>body</code> tag:
            </p>
            <pre class="brush: html">
                </ this goes inside the header tag>
                <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
                </ all these references goes before the closing body tag>
                <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
                <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
                <script src="js/jquery.stickyNavbar.min.js"></script>
            </pre>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End #setup -->
    <!-- START HTML Markup -->
    <div id="markup" class="scrollto">
        <div class="wrap">
            <h2>3. HTML Markup</h2>
            <p>
                To properly use stickyNavbar.js setup an usual HTML markup for the navigation:
            </p>
            <pre class="brush: html">
                 &lt;div id=&quot;header&quot;&gt; &lt;nav id=&quot;nav&quot;&gt; &lt;ul class=&quot;nav navbar-nav&quot;&gt; &lt;li&gt; &lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=&quot;#about&quot;&gt;About&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=&quot;#services&quot;&gt;Services&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=&quot;#contact&quot;&gt;Contact&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt;
            </pre>
            <p>
                The most important part here are the <code>href</code> attributes of the anchor tags. They should point to corresponding <code>div</code> section with the same <code>id</code> attribute.<br>
                 Thanks to this every navigation link will be highlighted as soon as corresponding section hits the bottom of the navigation wrapper.<br>
                 Also add <code>scrollto</code> class to every <code>div</code> section so the script can recognize which <code>href</code> attribute belongs to which <code>div</code>. You can choose your own class title instead of <code>scrollto</code> in the options object.<br>
                Your page HTML markup should looks like this:
            </p>
            <pre class="brush: html">
                <div id="home" class="scrollto">
                    <!-- Your content goes here -->
                </div>
                <div id="about" class="scrollto">
                    <!-- Your content goes here -->
                </div>
                <div id="services" class="scrollto">
                    <!-- Your content goes here -->
                </div>
                <div id="contact" class="scrollto">
                    <!-- Your content goes here -->
                </div>
            </pre>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End #markup -->
    <!-- START CSS -->
    <div id="CSS" class="scrollto">
        <div class="wrap">
            <h2>4. CSS</h2>
            <p>
                The styling of the navigation wrapper, <code>ul</code> and <code>li</code> elements is really up to you. In fact there is really only one style needed in your CSS:
            </p>
            <pre class="brush: css">
                 .active { color: #fff !important; text-decoration: underline !important; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
            </pre>
            <p>
                This ensures the highlighting of the active class. <code>transform: translate3d(0, 0, 0)</code> is a hack that triggers hardware acceleration during CSS3 animations.
            </p>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End #CSS -->
    <!-- START jQuery -->
    <div id="jquery" class="scrollto">
        <div class="wrap">
            <h2>5. jQuery</h2>
            <p>
                Call stickyNavbar function on the navigation wrapper, <code>nav</code> tag or <code>ul</code> tag either without options object:
            </p>
            <pre class="brush: js">
                 $(function () { $('.header').stickyNavbar(); });
            </pre>
            <p>
                or with the options object:
            </p>
            <pre class="brush: js">
                 $(function () { $('.header').stickyNavbar({ activeClass: "active", // Class to be added to highlight nav elements sectionSelector: "scrollto", // Class of the section that is interconnected with nav links navOffset: 0, // Offset from the default position of this() (nav container) animDuration: 250, // Duration of jQuery animation startAt: 0, // Stick the menu at XXXpx from the top of the this() (nav container) easing: "linear", // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing animateCSS: true, // AnimateCSS effect on/off animateCSSRepeat: false, // Repeat animation everytime user scrolls bottomAnimation: false, // CSS animation on/off in case we hit the bottom of the page cssAnimation: "fadeInDown", // AnimateCSS class that will be added to selector jqueryEffects: false, // jQuery animation on/off jqueryAnim: "slideDown", // jQuery animation type: fadeIn, show or slideDown selector: "a" // Selector to which activeClass will be added, either "a" or "li" }); });
            </pre>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End #jQuery -->
    <!-- START Options -->
    <div id="options" class="scrollto">
        <div class="wrap">
            <h2>6. Default Options</h2>
            <h3>activeClass: "active"</h3>
            <p>
                Class to be added to highlight nav elements
            </p>
            <h3>sectionSelector: "scrollto"</h3>
            <p>
                Class of the section that is interconnected with nav links
            </p>
            <h3>navOffset: 0</h3>
            <p>
                Offset from the default position of this() (nav container)
            </p>
            <h3>animDuration: 250</h3>
            <p>
                Duration of jQuery animation
            </p>
            <h3>startAt: 0</h3>
            <p>
                Stick the menu at XXXpx from the top of the this() (nav container)
            </p>
            <h3>easing: "linear"</h3>
            <p>
                Easing type. Effective if <code>jqueryEffects: true</code>, use <a href="http://gsgd.co.uk/sandbox/jquery/easing">jQuery Easing plugin</a> to extend easing types
            </p>
            <h3>animateCSS: true</h3>
            <p>
                <a href="http://daneden.github.io/animate.css/">AnimateCSS</a> effect on/off
            </p>
            <h3>animateCSSRepeat: false</h3>
            <p>
                Repeats animation everytime user scrolls
            </p>
            <h3>bottomAnimation: false</h3>
            <p>
                CSS animation on/off in case we hit the bottom of the page
            </p>
            <h3>cssAnimation: "fadeInDown"</h3>
            <p>
                AnimateCSS animation type
            </p>
            <h3>jqueryEffects: false</h3>
            <p>
                jQuery animation on/off
            </p>
            <h3>jqueryAnim: "slideDown"</h3>
            <p>
                jQuery animation type: <code>fadeIn</code>, <code>show</code> or <code>slideDown</code>
            </p>
            <h3>selector: "a"</h3>
            <p>
                Selector to which activeClass will be added, either <code>a</code> or <code>li</code>
            </p>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End #jQuery -->
    <!-- START CONTACT -->
    <div id="credits" class="scrollto">
        <div class="wrap">
            <h2>7. Credits</h2>
            <p class="align-center">
                <a target="_blank" href="http://api.jquery.com/"><i class="fa fa-heart"></i>jQuery</a><br>
                <a target="_blank" href="http://daneden.github.io/animate.css/">Animate.CSS</a><br>
                <a target="_blank" href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a><br>
            </p>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End Contact -->
    <!-- START CONTACT -->
    <div id="contact" class="scrollto">
        <div class="wrap">
            <h2>Contact</h2>
            <p class="align-center">
                Copyright &copy; 2014 Jozef Butko<br>
                <a href="http://www.jozefbutko.com">www.jozefbutko.com</a><br>
                <a href="http://www.github.com/jbutko">www.github.com/jbutko</a><br>
                <a target="_blank" href="http://www.twitter.com/jozefbutko">@jozefbutko</a>
            </p>
        </div>
        <!-- End Wrap -->
    </div>
    <!-- End Contact -->
</div>
<!-- End content-wrapper -->
<!-- END CONTACT -->
​
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript' src='http://www.jozefbutko.com/wp-content/themes/portfolio/stickyNavbar/jquery.stickyNavbar.min.js'></script>
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
 
body {
  margin: 0px;
  font-family: 'Exo 2', Raleway, Roboto, Bitter, sans-serif;
  font-weight: 200;
  line-height: 2;
  color: #000;
  font-size: 1.9em;
}
​
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
​
.wrap {
  margin: 0 auto;
}
​
a {
  font-weight: 700;
  color: #7E464C;
  font-style: bold;
}
​
a:hover {
  text-decoration: underline;
  color: #FBF1C3;
}
​
.roof {
  display: block;
  height: 1px;
  background: #fff;
  position: relative;
  top: 47px;
  margin: 0 auto;
}
​
.fa-bars {
  color: #FFFFFF;
  display: inline-block;
  margin: 0 30px 0 0;
  position: relative;
  top: 3px;
  font-size: 4.4em;
}
​
.glyphicon-chevron-down {
  display: inline-block;
  font-size: 1em;
  margin-left: 30px;
}
​
.hand-font {
  font-family: 'Gochi hand', Handlee, Roboto, serif;
  font-size: 1.2em;
  display: inline-block;
  font-weight: 400;
}
​
#header {
  background: #7E464C;
  width: 100%;
  display: block;
  padding: 20px;
  margin: 0;
  height: auto;
  border-bottom: #4B1319 2px solid;
  position: relative;
  top: 0px;
}
​
h1 {
  font-size: 4em;
  font-weight: 400;
  font-family: 'Crete Round', Helvetica, serif;
  letter-spacing: 2px;
  color: #333;
  padding-top: 0;
  margin-top: 0;
  display: inline-block;
}
​
.logo {
  color: #fff;
}
​
h2 {
  font-size: 2em;
  font-weight: 400;
  font-family: 'Crete Round', Bitter, serif;
  line-height: 1.5;
  color: #333;
  padding: 0 10%;
}
​
h1, h2, h3, a {
  text-align: center;
  text-decoration: none;
  font-weight: 300;
}
​
#options h3, #options p {
  text-align: left;
}
​
#options a {
  color: #FFA964;
}
​
p {
  text-align: left;
  padding-bottom: 15px;
}
/* Navigation */
#nav {
  text-align: center;
  margin: 0px auto;
  font-size: 1em;
}
​
#nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
​
#nav li {
  margin-right: 0;
  display: inline;
}
​
#nav ul li a {
  text-decoration: none;
  margin: 0px;
  padding: 10px 15px 0px 15px;
  color: #eee;
}
​
#nav ul li a:hover {
  color: #111;
  text-decoration: none;
}
​
#nav li.current-menu-item a {
  color: #ffffff;
  text-decoration: none;
}
​
#nav li.current_page_item {
  color: #ffffff;
  text-decoration: none;
}
/* Sections */
#home {
  background: #86C3AF;
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 6%;
  margin: 0 auto;
  text-align: center;
  border-bottom: #6DAA96 5px solid;
}
​
#markup, #options {
  background: #FBF1C3;
  min-height: 100%;
  max-height: 100%;
  height: auto;
  padding: 6%;
  margin: 0 auto;
  text-align: center;
  border-bottom: 5px solid #E2D8AA;
  color: #333;
}
​
#CSS, #setup, #credits {
  background: #FFA964;
  min-height: 100%;
  height: auto;
  padding: 6%;
  margin: 0 auto;
  text-align: center;
  border-bottom: 5px solid #E6904B;
}
​
#contact, #download, #jquery {
  background: #DE846C;
  min-height: 100%;
  height: auto;
  padding: 6%;
  margin: 0 auto;
  text-align: center;
  border-bottom: 5px solid #C56B53;
}
​
#contact h2 {
  font-size: 3.8em;
}
​
.fa-heart {
  margin-right: 10px;
}
/* Active class */
.active {
  color: #fff !important;
  text-decoration: underline !important;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
​
/* <code> and <pre> styling */
code {
  font-family: Consolas, monospace !important;
  font-style: bold;
}
​
​
/* Grid System */
/*
* Gridism
* A simple, responsive, and handy CSS grid by @cobyism
* https://github.com/cobyism/gridism
*/
​
/* Preserve some sanity */
.grid,
.unit {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
​
/* Set up some rules to govern the grid */
.grid {
  display: block;
  clear: both;
}
​
.grid .unit {
  float: left;
  width: 100%;
  padding: 10px;
}
​
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child {
  padding-left: 20px;
}
​
.grid .unit:last-child {
  padding-right: 20px;
}
​
/* Nested grids already have padding though, so let’s nuke it */
.unit .unit:first-child {
  padding-left: 0;
}
​
.unit .unit:last-child {
  padding-right: 0;
}
​
.unit .grid:first-child > .unit {
  padding-top: 0;
}
​
.unit .grid:last-child > .unit {
  padding-bottom: 0;
}
​
/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .unit,
.unit.no-gutters {
  padding: 0 !important;
}
​
/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap {
  max-width: 978px;
  margin: 0 auto;
}
​
/* Width classes also have shorthand versions numbered as fractions
* For example: for a grid unit 1/3 (one third) of the parent width,
* simply apply class="w-1-3" to the element. */
.grid .whole, .grid .w-1-1 {
  width: 100%;
}
​
.grid .half, .grid .w-1-2 {
  width: 50%;
}
​
.grid .one-third, .grid .w-1-3 {
  width: 33.3332%;
}
​
.grid .two-thirds, .grid .w-2-3 {
  width: 66.6665%;
}
​
.grid .one-quarter, .grid .w-1-4 {
  width: 25%;
}
​
.grid .three-quarters, .grid .w-3-4 {
  width: 75%;
}
​
.grid .one-fifth, .grid .w-1-5 {
  width: 20%;
}
​
.grid .two-fifths, .grid .w-2-5 {
  width: 40%;
}
​
.grid .three-fifths, .grid .w-3-5 {
  width: 60%;
}
​
.grid .four-fifths, .grid .w-4-5 {
  width: 80%;
}
​
.grid .golden-small, .grid .w-g-s {
  width: 38.2716%;
} /* Golden section: smaller piece */
.grid .golden-large, .grid .w-g-l {
  width: 61.7283%;
} /* Golden section: larger piece */
​
/* Clearfix after every .grid */
.grid {
  *zoom: 1;
}
​
.grid:before, .grid:after {
  display: table;
  content: "";
  line-height: 0;
}
​
.grid:after {
  clear: both;
}
​
/* Utility classes */
.align-center {
  text-align: center;
}
​
.align-left {
  text-align: left;
}
​
.align-right {
  text-align: right;
}
​
.pull-left {
  float: left;
}
​
.pull-right {
  float: right;
}
​
/* Responsive Stuff */
@media screen and (max-width: 470px) {
  .logo {
    font-size: 2em;
  }
​
  #home h2 {
    font-size: 1.3em;
  }
}
​
@media screen and (max-width: 568px) {
  /* Stack anything that isn’t full-width on smaller screens
and doesn't provide the no-stacking-on-mobiles class */
  .grid:not(.no-stacking-on-mobiles) > .unit {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  .unit .grid .unit {
    padding-left: 0px;
    padding-right: 0px;
  }
​
  /* Sometimes, you just want to be different on small screens */
  .center-on-mobiles {
    text-align: center !important;
  }
  .hide-on-mobiles {
    display: none !important;
  }
  h1 {
    font-size: 3.2em;
    margin-top: 30px;
  }
  .fa-bars {
    display: block;
    width: 100%;
    top: 36px;
  } 
}
​
@media screen and (max-width: 1179px) {
  .roof {
    width: 100%;
  }
  .fa-bars {
    display: block;
    width: 100%;
    top: 36px;
  }  
}
/* Expand the wrap a bit further on larger screens */
@media screen and (min-width: 1180px) {
  .wider .grid {
    max-width: 1180px;
    margin: 0 auto;
  }
  .fa-bars {
    top: 3px;
  }   
​
}
​
/* Gridism End */
 
$(function () {
  
  $('.header').stickyNavbar({
    activeClass: "active",
    sectionSelector: "scrollto",
    navOffset: 0,
    animDuration: 300,
    startAt: 0, // Stick the menu at XXXpx from the top
    easing: "easeInQuad",
    bottomAnimation: true,
    jqueryEffects: false,
    animateCSS: true,
    animateCSSRepeat: false,
    selector: "a",
    jqueryAnim: "fadeInDown", // jQuery effects: fadeIn, show, slideDown
    mobile: true
  });
});
​
/*! WOW - v0.1.5 - 2014-03-05
* Copyright (c) 2014 Matthieu Aussaguel; Licensed MIT */(function(){var a,b=function(a,b){return function(){return a.apply(b,arguments)}};a=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in a)d=a[c],null!=d&&(b[c]=d);return b},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a}(),this.WOW=function(){function c(a){null==a&&(a={}),this.scrollCallback=b(this.scrollCallback,this),this.scrollHandler=b(this.scrollHandler,this),this.start=b(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults)}return c.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0},c.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():document.addEventListener("DOMContentLoaded",this.start)},c.prototype.start=function(){var a,b,c,d;if(this.boxes=this.element.getElementsByClassName(this.config.boxClass),this.boxes.length){if(this.disabled())return this.resetStyle();for(d=this.boxes,b=0,c=d.length;c>b;b++)a=d[b],this.applyStyle(a,!0);return window.addEventListener("scroll",this.scrollHandler,!1),window.addEventListener("resize",this.scrollHandler,!1),this.interval=setInterval(this.scrollCallback,50)}},c.prototype.stop=function(){return window.removeEventListener("scroll",this.scrollHandler,!1),window.removeEventListener("resize",this.scrollHandler,!1),null!=this.interval?clearInterval(this.interval):void 0},c.prototype.show=function(a){return this.applyStyle(a),a.className=""+a.className+" "+this.config.animateClass},c.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),a.setAttribute("style",this.customStyle(b,d,c,e))},c.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.setAttribute("style","visibility: visible;"));return e},c.prototype.customStyle=function(a,b,c,d){var e;return e=a?"visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;":"visibility: visible;",b&&(e+="-webkit-animation-duration: "+b+"; -moz-animation-duration: "+b+"; animation-duration: "+b+";"),c&&(e+="-webkit-animation-delay: "+c+"; -moz-animation-delay: "+c+"; animation-delay: "+c+";"),d&&(e+="-webkit-animation-iteration-count: "+d+"; -moz-animation-iteration-count: "+d+"; animation-iteration-count: "+d+";"),e},c.prototype.scrollHandler=function(){return this.scrolled=!0},c.prototype.scrollCallback=function(){var a;return this.scrolled&&(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),!this.boxes.length)?this.stop():void 0},c.prototype.offsetTop=function(a){var b;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},c.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+this.element.clientHeight-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},c.prototype.util=function(){return this._util||(this._util=new a)},c.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},c}()}).call(this);
​
new WOW().init();
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jbutkopro
0viewers