KindaSticky

Hide your headers when you scroll down, make them show up when you scroll up.

by laustdeleuran

HTML

<header id="kindasticky">
    <h1>Header</h1>
</header>
<article>
    <div class="container">
        <h1>Rebel Mission to Ord Mantell</h1>
<p>You're all clear, kid. Let's blow this thing and go home! What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide. The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. Red Five standing by. I call it luck. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>
<h2>The Sith Lords</h2>
<p>I'm surprised you had the courage to take the responsibility yourself. I'm surprised you had the courage to take the responsibility yourself. No! Alderaan is peaceful. We have no weapons. You can't possibly&hellip;</p>
<ul>
<li>Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I'm in it for the money.</li>
<li>Don't underestimate the Force.</li>
</ul>
<h3>Revenge of the Sith</h3>
<p>I find your lack of faith disturbing. As you wish. The more you tighten your grip, Tarkin, the more star systems will slip through your fingers.</p>
<h4>The Rebel Force</h4>
<p>I call it luck. Still, she's got a lot of spirit. I don't know, what do you think? Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p>
<ol>
<li>Partially, but it also obeys your commands.</li>
<li>Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to...

SCSS

body {
    font-family: Helvetica Neue, sans-serif;
    font-size: 100%;
    margin: 0;
    padding: 60px 0 0;
}

header {
    background: rgba(0,0,0,0.8);
    color: #FFF;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 0;
    h1 {
        margin: 0;
        text-align: center;
    }
}

.container {
    width: 400px;
    margin: 0 auto;
}

JavaScript

(function ($) {
	defaults = {
		useOuterHeight: true
	}
	var methods = {
		init: function (options) {
			var o = $.extend(defaults, options);
			return this.each(function () {
                
                var that = this;
                
                that.func = $(window).bind('scroll', function(e) {
                   console.log($(that).css('top'));
                    var old_x = $(that).data('last_x') || 0;
                    var cur_x = $(this).scrollTop();
                    var height = $(that).outerHeight();
                    var top = parseInt($(that).css('top'));
                    
                    var d = (old_x - cur_x);
                    var n = top + d;
                    
                    if(n < height * -1) {
                        n = height * -1;
                    } else if(n > 0) {
                        n = 0;
                    }
                    
                    $(that).css('top', n);        
                    $(that).data('last_x', cur_x);
                });
			});
		},
		destroy: function (options) {
			var o = $.extend(defaults, options);

			return this.each(function () {
				//$(this).parent().find("canvas").remove();
			});
		}
	};
	$.fn.kindasticky = function (method) {
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || !method) {
			return methods.init.apply(this, arguments);
		} else {
			$.error('Method ' + method + ' does not exist on jQuery.kindasticky');
		}
	};
})(jQuery);

$('#kindasticky').kindasticky();