|
var js = {}; |
|
! function ($) { |
|
$.fn.exists = function () { |
|
return $(this).length > 0 |
|
}, |
|
js.model = { |
|
events: {}, |
|
extend: function (e) { |
|
var t = $.extend({}, this, e); |
|
return $.each(t.events, function (e, i) { |
|
t._add_event(e, i) |
|
}), t |
|
}, |
|
_add_event: function (e, t) { |
|
var i = this, |
|
s = e, |
|
o = "", |
|
n = document; |
|
e.indexOf(" ") > 0 && (s = e.substr(0, e.indexOf(" ")), o = e.substr(e.indexOf(" ") + 1)), "resize" != s && "scroll" != s && "load" != s || (n = window), $(n).on(s, o, function (e) { |
|
e.$el = $(this), "function" == typeof i.event && (e = i.event(e)), i[t].apply(i, [e]) |
|
}) |
|
} |
|
}, |
|
js.header = js.model.extend({ |
|
$header: null, |
|
$sub_header: null, |
|
active: 0, |
|
hover: 0, |
|
show: 0, |
|
y: 0, |
|
opacity: 1, |
|
direction: "down", |
|
events: { |
|
ready: "ready", |
|
scroll: "scroll", |
|
"mouseenter #header": "mouseenter", |
|
"mouseleave #header": "mouseleave" |
|
}, |
|
ready: function () { |
|
this.$header = $("nav"), this.$sub_header = $("header"), this.active = 1; |
|
console.log(this.$header); |
|
console.log(this.$sub_header); |
|
}, |
|
mouseenter: function () { |
|
var e = $(window).scrollTop(); |
|
this.hover = 1, this.opacity = 1, this.show = e, this.$header.stop().animate({ |
|
opacity: 1 |
|
}, 250) |
|
}, |
|
mouseleave: function () { |
|
this.hover = 0 |
|
}, |
|
scroll: function () { |
|
if (this.active) { |
|
var e = $(window).scrollTop(), |
|
t = e >= this.y ? "down" : "up", |
|
i = t !== this.direction, |
|
s = e - this.y, |
|
o = this.$sub_header.outerHeight(); |
|
clearTimeout(this.t), e < 70 && this.$header.removeClass("-white"), i && (0 == this.opacity && "up" == t ? (this.show = e, e < o ? this.show = 0 : this.show -= 70) : 1 == this.opacity && "down" == t && (this.show = e), this.show = Math.max(0, this.show)), this.$header.hasClass("-open") && (this.show = e), this.hover && (this.show = e); |
|
var n = e - this.show; |
|
n = Math.max(0, n), n = Math.min(n, 70); |
|
var a = (70 - n) / 70; |
|
this.$header.css("opacity", a), e > o ? this.$header.addClass("-white") : 0 == a && this.$header.removeClass("-white"), this.y = e, this.direction = t, this.opacity = a |
|
} |
|
} |
|
}), |
|
js.scrollto = js.model.extend({ |
|
events: { |
|
"click .scrollto": "_click" |
|
}, |
|
_click: function (e) { |
|
e.preventDefault(); |
|
var t = e.$el.attr("href"), |
|
i = $(t); |
|
i.length && ($("html, body").animate({ |
|
scrollTop: i.offset().top |
|
}, 500, function () { |
|
$(document).trigger("scrollto_complete", [i]) |
|
}), $(document).trigger("scrollto", [i])) |
|
} |
|
}) |
|
}(jQuery); |
|
js.header.ready(); |
git this from Advanced Custom Fields. I Loved their menu.
I gotta simplify this script yet and reuse.