brand-inspiration.js
2.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/*
* Owner: www.asos.com
* Author: ASOS Creative developers
*/
$(function(){
var toggleLabel = $('.creative .toggle-label');
var brandListPanel = $('.creative .brand-list-panel');
var showMoreBrands = $('.creative .toggle-label.more');
var hideBrands = $('.creative .toggle-label.less');
// Fake Lazyload
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() + 50; // +50 to show more images sooner
var elemTop = elem.offset().top;
var elemBottom = elemTop + $(elem).height();
if (docViewBottom > elemTop && elemTop > docViewTop) {
elem.css({'visibility':'visible', 'opacity': 0}).delay(200).addClass('fade-in').animate({'opacity': 1});
}
}
// Fade in visible <li>
function fadeInVisible() {
$('.creative .brand-tiles li:not(.fade-in)').each(function(event) {
isScrolledIntoView($(this));
});
}
fadeInVisible();
// Init menu
//toggleLabel.hide();
// brandListPanel.delay(6000).slideUp(600, function() {
// showMoreBrands.fadeIn();
// fadeInVisible();
// });
brandListPanel.hide();
hideBrands.hide();
// Hide/Show menu
toggleLabel.click(function(event) {
event.preventDefault();
$this = $(this);
toggleLabel.toggle();
brandListPanel.stop(true).slideToggle();
});
//Fixed Scroll bar
var fixedPositionDiv = $('.creative .fixed-position');
var yOffset = $('.creative .toggle-nav').offset().top;
function onScroll(event) {
// For fixed bar
// if ($(window).scrollTop() >= yOffset){
// fixedPositionDiv.addClass('fixed')
// } else {
// fixedPositionDiv.removeClass('fixed');
// }
// Hide brand-list-panel on scroll
// if (hideBrands.is(':visible')) {
// brandListPanel.slideUp();
// toggleLabel.toggle();
// }
// For fake lazyload
$('.creative .brand-tiles li:not(.fade-in)').each(function(event) {
isScrolledIntoView($(this));
});
}
onScroll(); // Init
if (document.addEventListener){
document.addEventListener('scroll', onScroll, false);
} else if (window.attachEvent){
window.attachEvent('onscroll', onScroll);
}
//document.addEventListener('scroll', onScroll);
//Scroll to top
$('.creative .footer a').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
return false;
});
});