Compare commits
13 Commits
v1.4.0
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
| 99db6b7f4b | |||
| 32e756ee6e | |||
| 86897b193a | |||
| f22109f427 | |||
| f3f5f8893c | |||
| 406d9a7ef6 | |||
| e57d19fb84 | |||
| 136dc60db0 | |||
| 2b9eedbdd0 | |||
| 2b66cd672b | |||
| fbe4aabdf9 | |||
| d90d907629 | |||
| 5d1a61e714 |
2
.github/FUNDING.yml
vendored
Normal file
2
.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
github: tanrax
|
||||
ko_fi: androsfenollosa
|
||||
45
README.md
45
README.md
@ -40,7 +40,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
|
||||
Add to your `<head>` the following tag.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.4.0/dist/ffnm.min.js" integrity="sha384-WsAoFj8H5Jl3+nG7ON5XXiozrADpSLshx/XdN7xu2GUVkJEZB5C3AGrFtdi6tARh" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.5.0/dist/ffnm.min.js" integrity="sha384-qlI8XJcMcJMh52x4w9HA9ItB8KmW6pKaJXijVQFl6UvT1nGCH+U6Y7sbbc11HkCH" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
### Examples
|
||||
@ -114,6 +114,21 @@ Add to your `<head>` the following tag.
|
||||
<nav is-scroll-down="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
#### Scroll top
|
||||
|
||||
##### Add the class `show` to `nav` when the scroll is top of the page.
|
||||
|
||||
```html
|
||||
<nav is-scroll-top="class:add('show')"></nav>
|
||||
```
|
||||
|
||||
##### Remove the `show` class from `nav` when the scroll top of the page.
|
||||
|
||||
```html
|
||||
<nav is-scroll-top="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
|
||||
#### Hover
|
||||
|
||||
##### Add the class `show` to `div` when hover.
|
||||
@ -138,7 +153,7 @@ Add to your `<head>` the following tag.
|
||||
|
||||
```html
|
||||
<div is-hover="class:toggle('show', '#button')"></div>
|
||||
<button id="button">Hi</div>
|
||||
<button id="button">Hi</button>
|
||||
```
|
||||
|
||||
#### Visible
|
||||
@ -165,7 +180,7 @@ Add to your `<head>` the following tag.
|
||||
|
||||
```html
|
||||
<div is-visible="class:toggle('show', '#button')"></div>
|
||||
<button id="button">Hi</div>
|
||||
<button id="button">Hi</button>
|
||||
```
|
||||
|
||||
#### Not visible
|
||||
@ -195,8 +210,6 @@ Add to your `<head>` the following tag.
|
||||
<input id="name">
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Spanish/Español
|
||||
@ -206,7 +219,7 @@ Add to your `<head>` the following tag.
|
||||
Añade a tu `<head>` la siguiente etiqueta.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.4.0/dist/ffnm.min.js" integrity="sha384-lAUBI0wOuUBOb4gGjqjeuJlFgrl1YixuQdG/OngLda/8+ZPThlN2xk+EJAkl7gEd" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.5.0/dist/ffnm.min.js" integrity="sha384-qlI8XJcMcJMh52x4w9HA9ItB8KmW6pKaJXijVQFl6UvT1nGCH+U6Y7sbbc11HkCH" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
### Ejemplos de uso
|
||||
@ -280,6 +293,20 @@ Añade a tu `<head>` la siguiente etiqueta.
|
||||
<nav is-scroll-down="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
#### Scroll esta arriba de la pagina (principio)
|
||||
|
||||
##### Añadir la clase `show` al selector `nav` cuando el scroll esta al inicio.
|
||||
|
||||
```html
|
||||
<nav is-scroll-top="class:add('show')"></nav>
|
||||
```
|
||||
|
||||
##### Quitar la clase `show` al selector `nav` cuando el scroll esta al inicio.
|
||||
|
||||
```html
|
||||
<nav is-scroll-top="class:remove('show')"></nav>
|
||||
```
|
||||
|
||||
#### Hover
|
||||
|
||||
##### Añade la clase `show` al `div` cuando sea hover.
|
||||
@ -304,7 +331,7 @@ Añade a tu `<head>` la siguiente etiqueta.
|
||||
|
||||
```html
|
||||
<div is-hover="class:toggle('show', '#button')"></div>
|
||||
<button id="button">Hi</div>
|
||||
<button id="button">Hi</button>
|
||||
```
|
||||
|
||||
#### Visible
|
||||
@ -331,7 +358,7 @@ Añade a tu `<head>` la siguiente etiqueta.
|
||||
|
||||
```html
|
||||
<div is-visible="class:toggle('ver', '#boton')"></div>
|
||||
<button id="boton">Hi</div>
|
||||
<button id="boton">Hi</button>
|
||||
```
|
||||
|
||||
#### No visible
|
||||
@ -358,7 +385,7 @@ Añade a tu `<head>` la siguiente etiqueta.
|
||||
|
||||
```html
|
||||
<div is-not-visible="class:toggle('ver', '#boton')"></div>
|
||||
<button id="boton">Hi</div>
|
||||
<button id="boton">Hi</button>
|
||||
```
|
||||
|
||||
|
||||
|
||||
2
dist/ffnm.min.js
vendored
2
dist/ffnm.min.js
vendored
@ -1,2 +1,2 @@
|
||||
const EVENTS=["is-click","is-scroll-up","is-scroll-down","is-hover","is-visible","is-not-visible"],FUNCTION_TREE={class:["add","remove","toggle"]};let elementsValidates=[],lastScrollTop=void 0;function validateSyntax(){return elementsValidates=[],EVENTS.map(e=>[...document.querySelectorAll(`[${e}]`)].map(t=>{let s=Object.keys(FUNCTION_TREE).map(s=>FUNCTION_TREE[s].map(a=>RegExp(`^${s}:${a}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(t.getAttribute(e))).some(e=>e)).every(e=>e);return s?elementsValidates.push(t):(console.error("FFNM: Bad syntax"),console.error(t)),s}).every(e=>e)).every(e=>e)}function splitParams(e,t){let s=e.getAttribute(t),a=RegExp("^(\\w+):").exec(s)[1],l=RegExp(":(\\w+)\\(").exec(s)[1],i=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],n=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:l,value:i,target:null!==n.exec(s)?n.exec(s)[1]:void 0}}function getElementsValidatesByEvent(e){return[...elementsValidates].filter(t=>t.hasAttribute(e))}function addEventClick(){return getElementsValidatesByEvent("is-click").forEach(e=>{let t=splitParams(e,"is-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{void 0!==s&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":s.classList.add(t.value);break;case"remove":s.classList.remove(t.value);break;case"toggle":s.classList.toggle(t.value)}})})}})}function addEventScroll(){let e=getElementsValidatesByEvent("is-scroll-down"),t=getElementsValidatesByEvent("is-scroll-up");window.addEventListener("scroll",()=>{let s=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(s>lastScrollTop){let t=splitParams(e,"is-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(s<=lastScrollTop){let t=splitParams(e,"is-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),lastScrollTop=s<=0?0:s},!1)}function addEventHover(){return getElementsValidatesByEvent("is-hover").forEach(e=>{let t=splitParams(e,"is-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{if(void 0!==s)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{s.classList.add(t.value)}),e.addEventListener("mouseout",()=>{s.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{s.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{s.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{s.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{s.classList.toggle(t.value)})}})}})}function addEventVisible(){let e=getElementsValidatesByEvent("is-visible"),t=getElementsValidatesByEvent("is-not-visible");const s=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(e.isIntersecting){let e=splitParams(t,"is-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});e.forEach(e=>{s.observe(e)});const a=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(!e.isIntersecting){let e=splitParams(t,"is-not-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});t.forEach(e=>{a.observe(e)})}document.addEventListener("DOMContentLoaded",()=>{validateSyntax(),addEventClick(),addEventScroll(),addEventHover(),addEventVisible()});
|
||||
const EVENTS=["is-click","is-scroll-up","is-scroll-down","is-scroll-top","is-hover","is-visible","is-not-visible"],FUNCTION_TREE={class:["add","remove","toggle"]};let elementsValidates=[],lastScrollTop=void 0;function validateSyntax(){return elementsValidates=[],EVENTS.map(e=>[...document.querySelectorAll(`[${e}]`)].map(t=>{let s=Object.keys(FUNCTION_TREE).map(s=>FUNCTION_TREE[s].map(a=>RegExp(`^${s}:${a}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(t.getAttribute(e))).some(e=>e)).every(e=>e);return s?elementsValidates.push(t):(console.error("FFNM: Bad syntax"),console.error(t)),s}).every(e=>e)).every(e=>e)}function splitParams(e,t){let s=e.getAttribute(t),a=RegExp("^(\\w+):").exec(s)[1],l=RegExp(":(\\w+)\\(").exec(s)[1],i=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],c=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:l,value:i,target:null!==c.exec(s)?c.exec(s)[1]:void 0}}function getElementsValidatesByEvent(e){return[...elementsValidates].filter(t=>t.hasAttribute(e))}function addEventClick(){return getElementsValidatesByEvent("is-click").forEach(e=>{let t=splitParams(e,"is-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{void 0!==s&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":s.classList.add(t.value);break;case"remove":s.classList.remove(t.value);break;case"toggle":s.classList.toggle(t.value)}})})}})}function addEventScroll(){let e=getElementsValidatesByEvent("is-scroll-down"),t=getElementsValidatesByEvent("is-scroll-up"),s=getElementsValidatesByEvent("is-scroll-top");window.addEventListener("scroll",()=>{let a=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(a>lastScrollTop){let t=splitParams(e,"is-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(a<=lastScrollTop){let t=splitParams(e,"is-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),lastScrollTop=a<=0?0:a,s.forEach(e=>{let t=splitParams(e,"is-scroll-top");if(a<=0)switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}else switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.remove(t.value);break;case"remove":e.classList.add(t.value)}}})},!1)}function addEventHover(){return getElementsValidatesByEvent("is-hover").forEach(e=>{let t=splitParams(e,"is-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{if(void 0!==s)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{s.classList.add(t.value)}),e.addEventListener("mouseout",()=>{s.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{s.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{s.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{s.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{s.classList.toggle(t.value)})}})}})}function addEventVisible(){let e=getElementsValidatesByEvent("is-visible"),t=getElementsValidatesByEvent("is-not-visible");const s=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(e.isIntersecting){let e=splitParams(t,"is-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});e.forEach(e=>{s.observe(e)});const a=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(!e.isIntersecting){let e=splitParams(t,"is-not-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});t.forEach(e=>{a.observe(e)})}document.addEventListener("DOMContentLoaded",()=>{validateSyntax(),addEventClick(),addEventScroll(),addEventHover(),addEventVisible()});
|
||||
//# sourceMappingURL=ffnm.min.js.map
|
||||
|
||||
37
package-lock.json
generated
37
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ffnm",
|
||||
"version": "1.0.0",
|
||||
"version": "1.5.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -532,12 +532,19 @@
|
||||
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
|
||||
},
|
||||
"copy-props": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.4.tgz",
|
||||
"integrity": "sha512-7cjuUME+p+S3HZlbllgsn2CDwS+5eCCX16qBgNC4jgSTf49qR1VKy/Zhl400m0IQXl/bPGEVqncgUUMjrr4s8A==",
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.5.tgz",
|
||||
"integrity": "sha512-XBlx8HSqrT0ObQwmSzM7WE5k8FxTV75h1DX1Z3n6NhQ/UYYAvInWYmG06vFt7hQZArE2fuO62aihiWIVQwh1sw==",
|
||||
"requires": {
|
||||
"each-props": "^1.3.0",
|
||||
"is-plain-object": "^2.0.1"
|
||||
"each-props": "^1.3.2",
|
||||
"is-plain-object": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"is-plain-object": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
|
||||
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"core-util-is": {
|
||||
@ -1327,9 +1334,9 @@
|
||||
}
|
||||
},
|
||||
"hosted-git-info": {
|
||||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
|
||||
"integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
|
||||
"version": "2.8.9",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
|
||||
"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
|
||||
},
|
||||
"inflight": {
|
||||
"version": "1.0.6",
|
||||
@ -1346,9 +1353,9 @@
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
|
||||
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
||||
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
|
||||
},
|
||||
"interpret": {
|
||||
"version": "1.4.0",
|
||||
@ -2899,9 +2906,9 @@
|
||||
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
|
||||
},
|
||||
"y18n": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
|
||||
"integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
|
||||
"integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
|
||||
},
|
||||
"yargs": {
|
||||
"version": "7.1.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ffnm",
|
||||
"version": "1.3.0",
|
||||
"version": "1.5.0",
|
||||
"description": "Simple plugin to avoid writing Javascript in trivial tasks.",
|
||||
"main": "gulpfile.js",
|
||||
"dependencies": {
|
||||
|
||||
@ -8,13 +8,17 @@
|
||||
* return void
|
||||
*/
|
||||
function addEventScroll() {
|
||||
let eventScrollDown = 'is-scroll-down';
|
||||
let eventScrollUp = 'is-scroll-up';
|
||||
const eventScrollDown = 'is-scroll-down';
|
||||
const eventScrollUp = 'is-scroll-up';
|
||||
const eventScrollTop = 'is-scroll-top';
|
||||
let elementsDown = getElementsValidatesByEvent(eventScrollDown);
|
||||
let elementsUp = getElementsValidatesByEvent(eventScrollUp);
|
||||
let elementsTop = getElementsValidatesByEvent(eventScrollTop);
|
||||
window.addEventListener("scroll", () => {
|
||||
|
||||
let posScroll = window.pageYOffset || document.documentElement.scrollTop;
|
||||
// Scroll down
|
||||
|
||||
// Scroll down - is-scroll-down
|
||||
elementsDown.forEach((element) => {
|
||||
if (posScroll > lastScrollTop) {
|
||||
let params = splitParams(element, eventScrollDown);
|
||||
@ -32,7 +36,8 @@ function addEventScroll() {
|
||||
}
|
||||
}
|
||||
});
|
||||
// Scroll up
|
||||
|
||||
// Scroll up - is-scroll-up
|
||||
elementsUp.forEach((element) => {
|
||||
if (posScroll <= lastScrollTop) {
|
||||
let params = splitParams(element, eventScrollUp);
|
||||
@ -51,6 +56,38 @@ function addEventScroll() {
|
||||
}
|
||||
});
|
||||
lastScrollTop = posScroll <= 0 ? 0 : posScroll; // For Mobile or negative scrolling
|
||||
|
||||
// Scroll top - is-scroll-top
|
||||
elementsTop.forEach((element) => {
|
||||
let params = splitParams(element, eventScrollTop);
|
||||
if (posScroll <= 0) {
|
||||
switch(params.functionParent) {
|
||||
case 'class':
|
||||
switch(params.functionChild) {
|
||||
case 'add':
|
||||
element.classList.add(params.value);
|
||||
break;
|
||||
case 'remove':
|
||||
element.classList.remove(params.value);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch(params.functionParent) {
|
||||
case 'class':
|
||||
switch(params.functionChild) {
|
||||
case 'add':
|
||||
element.classList.remove(params.value);
|
||||
break;
|
||||
case 'remove':
|
||||
element.classList.add(params.value);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
//===
|
||||
// VARIABLES
|
||||
//===
|
||||
const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-visible', 'is-not-visible'];
|
||||
const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-scroll-top', 'is-hover', 'is-visible', 'is-not-visible'];
|
||||
const FUNCTION_TREE = {
|
||||
'class': ['add', 'remove', 'toggle']
|
||||
};
|
||||
|
||||
@ -15,6 +15,22 @@
|
||||
transition: 1s;
|
||||
transform: translateY(10rem);
|
||||
}
|
||||
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5rem;
|
||||
color: white;
|
||||
background: red;
|
||||
transition: 1s;
|
||||
transform: translateY(-10rem);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@ -22,6 +38,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<nav is-scroll-down="class:remove('show')" is-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav>
|
||||
<div is-scroll-top="class:add('show')" class="top show">You is top page</div>
|
||||
<p is-scroll-down="class:toggle('ala')">
|
||||
Ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices. Sapien et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user