Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

Commit 48c905e

Browse files
ryuranryuran
authored
Merge pull request #5 from ryuran/fix/20minutes/offsetTop
fix and rework follow scroll
2 parents 6fcf0f8 + 28d7452 commit 48c905e

File tree

6 files changed

+524
-463
lines changed

6 files changed

+524
-463
lines changed

‎.editorconfig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
root = true
22

3-
[*.js]
3+
[*{.js,.html}]
44
indent_style = tab
55
end_of_line = lf
66
charset = utf-8

‎demo/demo.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
var APP = APP || {};
2+
3+
window.Sticky = require('../src/sticky.js');
4+
5+
6+
// MEDIA QUERY DEFINITION
7+
8+
APP.mediaQuery = {};
9+
APP.mediaQuery.lg = window.matchMedia('(min-width: 1024px)');
10+
11+
APP.stickyElem = document.querySelector('.js-stickable');
12+
APP.stickyElem.promArr = [];
13+
APP.stickyElem.images = APP.stickyElem.querySelectorAll('img');
14+
15+
16+
var header = document.getElementById('header');
17+
18+
// PROMISE API
19+
20+
APP.imgPromise = function (img) {
21+
22+
return new Promise(function (resolve, reject) {
23+
img.addEventListener('load', function (e) {
24+
// we can do more but keep it simple for the sake of the demo
25+
resolve(img);
26+
}, false);
27+
});
28+
};
29+
30+
// Create array of promises
31+
32+
Array.prototype.forEach.call(APP.stickyElem.images, function (img, i) {
33+
// Stacking promise
34+
35+
APP.imgPromise(img).then(function (rep) {
36+
rep.parentNode.classList.remove('loading');
37+
});
38+
39+
APP.stickyElem.promArr.push(APP.imgPromise(img));
40+
});
41+
42+
// Wait for all promise to be resolved
43+
44+
Promise.all(APP.stickyElem.promArr).then(function () {
45+
46+
if (APP.mediaQuery.lg.matches && !APP.stickyElem.sticky) {
47+
// a l'init on instancie sticky si il est null et qu on est dans la bonne MQ
48+
APP.stickyElem.sticky = new window.Sticky(APP.stickyElem,
49+
{
50+
offsetTop: function () {
51+
return header.offsetHeight;
52+
},
53+
54+
onInit: function(){ console.log('onInit')}, // (element)
55+
onEnabling: function(){ console.log('onEnabling')}, // (element)
56+
onDisabling: function(){ console.log('onDisabling')}, // (element)
57+
onStick: function(){ console.log('onStick')}, // (element)
58+
onUnStick: function(){ console.log('onUnStick')}, // (element)
59+
onStuck: function(){ console.log('onStuck')}, // (element)
60+
onUnStuck: function(){ console.log('onUnStuck')} // (element)
61+
}
62+
);
63+
}
64+
65+
APP.mediaQuery.lg.addListener(function (e) {
66+
67+
if (e.matches) {
68+
if (!APP.stickyElem.sticky) {
69+
console.log('Match la MQ et sticky non instancié => on init');
70+
APP.stickyElem.sticky = new window.Sticky(APP.stickyElem);
71+
}
72+
else {
73+
console.log('Match la MQ et sticky DEJA instancié => on l’enable');
74+
APP.stickyElem.sticky.enable();
75+
}
76+
}
77+
else {
78+
console.log('Ne Match pas la MQ et est instancié donc on disable');
79+
APP.stickyElem.sticky.disable();
80+
}
81+
});
82+
});

‎docs/index.html‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -52,19 +52,17 @@ <h1 class="tt-main pl-1c5 ff-dro fs-xxxl fs-xxl@xs">Mon titre</h1>
5252
</aside>
5353
<div class="fb-65 fs-1 fg-1 pr-4 pr-0@lg fb-100@lg">
5454

55-
<h2 class="mb-1 ff-dro fs-l fw-700">Le sommeil de votre bébé jusqu'à 2 mois </h2>
55+
<h2 class="mb-1 ff-dro fs-l fw-700">Qui accusantium fugit deleniti</h2>
5656

57-
<p>Bébé ne distingue pas encore le jour de la nuit, c'est normal qu'il vous réveille. Ne perdez pas patience… Il dort para. <a class="td-u c-main:h" href="#">Il commence par un sommei</a>l agité, puis son sommeil devient calme. Le reste du temps,
58-
il s'agite, pleure et mange... Même s'il vous fait la vie dure, profitez-en, vous regretterez ces moments plus tard ! </p>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a class="td-u c-main:h" href="#">Voluptas blanditiis</a> ad quam non ipsa, amet similique minus ullam? Quos exercitationem ipsum veniam recusandae nostrum eaque, mollitia aperiam fugit optio facere. </p>
5958

6059
<p class="bt-main-s bb-main-s pt-1c5 pb-1c5 ta-c ff-dro fs-m">
61-
<em class="fs-i">A faire : ne vous précipitez pas immédiatement à son chevet, et évitez de trop prolonger les câlins. Parlez-lui doucement pour le calmer, puis quittez sa chambre. Les jours suivants, vous allongerez ce délai d'attente : il devra bien apprendre à se rendormir sans vous.</em>
60+
<em class="fs-i">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet officia ea rem debitis dolorum sed quasi ipsa totam saepe, asperiores blanditiis consequuntur vel in nesciunt veritatis nihil repellendus harum. Praesentium.</em>
6261
</p>
6362

64-
<h2 class="mb-1 ff-dro fs-l fw-700">Le sommeil de votre bébé jusqu'à 2 mois </h2>
63+
<h2 class="mb-1 ff-dro fs-l fw-700">Similique non quo accusantium quia corporis natus !</h2>
6564

66-
<p>Bébé ne distingue pas encore le jour de la nuit, c'est normal qu'il vous réveille. Ne perdez pas patience… Il dort par courtes périodes, de une à quatre heures. Il commence par un sommeil agité, puis son sommeil devient calme. Le reste du temps,
67-
il s'agite, pleure et mange... Même s'il vous fait la vie dure, profitez-en, vous regretterez ces moments plus tard ! </p>
65+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui accusantium fugit deleniti cum sequi non soluta possimus, dolorum amet, sint voluptatibus ullam ex exercitationem voluptatum nemo vitae veritatis, dolore magnam.</p>
6866

6967
<figure id="test-visible" class="ta-c p-r">
7068
<div class="p-r img-ratio r16-9">
@@ -89,30 +87,29 @@ <h2 class="mb-1 ff-dro fs-l fw-700">Le sommeil de votre bébé jusqu'à 2 mois <
8987
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
9088
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
9189

92-
<h2 class="mb-1 ff-dro fs-l fw-700">Le sommeil de votre bébé jusqu'à 2 mois </h2>
90+
<h2 class="mb-1 ff-dro fs-l fw-700">Asperiores doloribus omnis </h2>
9391

94-
95-
<p>Bébé ne distingue pas encore le jour de la nuit, c'est normal qu'il vous réveille. Ne perdez pas patience… Il dort par courtes périodes, de une à quatre heures. Il commence par un sommeil agité, puis son sommeil devient calme. Le reste du temps,
96-
il s'agite, pleure et mange... Même s'il vous fait la vie dure, profitez-en, vous regretterez ces moments plus tard ! </p>
92+
93+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta porro a voluptatibus facere, cum ab voluptatem distinctio sit dignissimos velit asperiores doloribus omnis ea consectetur nostrum itaque tempora enim culpa.</p>
9794
</div>
9895
<aside class="fb-25 fs-1 fg-1 fb-100@lg aside-ad">
99-
100-
96+
97+
10198
<p class="offset-elem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae quasi dolores totam velit distinctio, doloribus sit consequatur suscipit non, soluta atque provident sunt impedit assumenda, eaque eum? Voluptatem, nisi, expedita?</p>
102-
103-
104-
<div class="js-stickable">
105-
<figure class="loading">
106-
<!-- <img class="w-100" alt="a contextual zone zone" src="//dummyimage.com/300x400/8f5454/ffffff"> -->
107-
</figure>
108-
<figure class=" loading">
109-
<img class="w-100" alt="a contextual zone zone" src="//dummyimage.com/680x383/917e6f/ab9584">
110-
</figure>
111-
<figure class="loading">
112-
<!-- <img class="w-100" alt="a contextual zone zone" src="//dummyimage.com/300x200/8f5454/ffffff"> -->
113-
</figure>
99+
100+
<div class="js-stickable-wrap">
101+
<div class="js-stickable">
102+
<figure class="loading">
103+
<!-- <img class="w-100" alt="a contextual zone zone" src="//dummyimage.com/300x400/8f5454/ffffff"> -->
104+
</figure>
105+
<figure class=" loading">
106+
<img class="w-100" alt="a contextual zone zone" src="//dummyimage.com/680x383/917e6f/ab9584">
107+
</figure>
108+
<figure class="loading">
109+
<!-- <img class="w-100" alt="a contextual zone zone" src="//dummyimage.com/300x200/8f5454/ffffff"> -->
110+
</figure>
111+
</div>
114112
</div>
115-
116113
</aside>
117114
</div>
118115
<footer class="bgc-light p-1 pt-0c5 pb-0c5 mt-2 mb-2">

0 commit comments

Comments
 (0)