Test - Scroll + Timeout Event

by darcyclarke

HTML

<div id="container">
    <div id="nav">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>
<div id="content"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum sollicitudin commodo. Quisque pharetra turpis leo. Nullam placerat, diam nec tincidunt adipiscing, neque neque varius velit, a dignissim quam erat non nisi. Donec semper dui a massa fermentum convallis. Maecenas sit amet risus turpis, et consectetur nisl. Phasellus sit amet congue neque. Morbi vel volutpat enim. Integer a lectus non augue congue varius quis vel odio. Curabitur gravida malesuada eleifend. In hac habitasse platea dictumst. Mauris in dolor vel turpis luctus commodo at sed eros. Mauris ac est risus, ac tempus sapien. Nulla ac dui diam, ut consectetur nulla. Proin lacinia molestie enim eu vestibulum.
</p>
<p>
Donec risus nulla, convallis ut eleifend consectetur, molestie quis turpis. Praesent pellentesque lacus eget ligula scelerisque in vulputate justo faucibus. In non leo eget nunc auctor lacinia et vel neque. Suspendisse potenti. Ut aliquam quam a purus condimentum auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin congue erat in mauris egestas quis pulvinar justo convallis. Vivamus vitae purus est.
</p>
<p>
Cras consectetur adipiscing pretium. Nulla dictum ante eu justo dignissim vitae ultricies leo vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tortor lorem, ornare ultricies rutrum vitae, eleifend vel nunc. Proin facilisis sollicitudin ante, a scelerisque nunc molestie sit amet. Suspendisse laoreet tincidunt sapien a semper. Mauris orci mauris, viverra nec egestas a, hendrerit a diam. Quisque est ante, faucibus tempus iaculis in, vehicula non metus. Suspendisse quis viverra...

CSS

body {
 font-size: 11px; 
   line-height: 14px; 
    font-family: sans-serif;   
}
#container {
 width: 80%;
  margin: auto; 
   position: relative; 
}
#content {
 background: #ebebeb;
 margin: 10px auto;
 border: 1px solid #ccc;
 color: #545454;
    padding: 12% 4% 4%;
    text-shadow: 0 0 1px #fff;
}

#nav {
  border: 1px solid #404040;
  background: #6c6c6c; 
    position: absolute;
    width: 100%;
}
#nav ul {
padding: 4%;   
}
#nav ul li {
 list-style: none;
 display: inline-block; 
   margin-right: 10px; 
}
#nav ul li a {
 color: #fff;
  text-shadow: 0 0 1px #000;  
   text-decoration: none;
   font-weight: bold; 
}
p {
 margin: 15px;   
}

JavaScript

(function(window){
    var eventThrottle = {};
    eventThrottle.delay = 200,
    eventThrottle.timeout = false, 
    eventThrottle.run = function(cb){
        if(eventThrottle.timeout !== false){
           clearTimeout(eventThrottle.timeout);
        }  
        eventThrottle.timeout = setTimeout(function(){ eventThrottle.end(cb); }, eventThrottle.delay);
    },
    eventThrottle.end = function(cb){
        eventThrottle.timeout = false;
        if(typeof(cb) == "function")
            cb();
    };
    window.eventThrottle = eventThrottle;
})(window);

$(window).bind("scroll", function(){
    eventThrottle.run(function(){
        console.log('stopped');
        $('#nav').animate({top:$(window).scrollTop()+"px"},500);
    });
});