<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Test i-scroll</title> <script src="../dist/ffnm.min.js"></script> <style> .nav { position: fixed; bottom: 0; left: 0; right: 0; height: 10rem; background: orange; transition: 1s; transform: translateY(10rem); } .show { transform: translateY(0); } </style> </head> <body> <nav i-scroll-down="class:remove('show')" i-scroll-up="class:add('show')" class="nav" id="nav">Mi nav</nav> <p i-scroll-down="class:toggle('ala', 'p')"> 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> <p> Praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris. Pellentesque habitant morbi tristique senectus et? </p> <p> Tempor nec feugiat nisl pretium fusce id velit ut tortor pretium. At elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec. </p> <p> Ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel, pharetra vel turpis nunc eget lorem dolor, sed! Aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros. </p> <p> Laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit! Mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in! </p> <p> Massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra? Euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante! </p> <p> Feugiat scelerisque varius morbi enim nunc, faucibus a pellentesque sit amet, porttitor eget dolor morbi non arcu risus, quis varius quam quisque id diam? Pellentesque id nibh tortor, id aliquet! </p> <p> Tempus, urna et pharetra pharetra, massa massa ultricies mi, quis hendrerit dolor magna eget est lorem ipsum dolor sit amet, consectetur adipiscing? Venenatis, lectus magna fringilla urna, porttitor rhoncus dolor. </p> <p> In ante metus, dictum at tempor commodo, ullamcorper a lacus? Hendrerit gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci. </p> <p> Id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus! Nec dui nunc mattis enim ut tellus elementum sagittis vitae et. </p> <p> Faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus, sed. </p> <p> Leo vel orci porta non pulvinar. Sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus? </p> <p> Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus! </p> <p> Nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet? Nunc sed velit dignissim sodales ut eu sem integer. </p> <p> Sed vulputate mi sit amet mauris commodo quis imperdiet massa! Senectus et netus et malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi leo urna, molestie at elementum eu! </p> <p> Eu mi bibendum neque egestas congue quisque egestas diam in. Id interdum velit laoreet id donec ultrices tincidunt arcu, non sodales neque sodales ut etiam sit amet nisl purus, in! </p> <p> Id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus, urna et pharetra pharetra. Eros donec ac odio tempor. </p> <p> Tortor aliquam nulla facilisi cras fermentum? Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante. </p> <p> Nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi, quis eleifend quam adipiscing vitae! </p> <p> Curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo! Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent. </p> <p> Ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus! Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. </p> <p> Egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc? Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis. </p> <p> Nibh tellus molestie nunc, non blandit massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et! Mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas. </p> <p> Faucibus purus in massa tempor nec? Tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat. </p> <p> Donec adipiscing tristique risus nec feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Consectetur a erat nam at lectus urna duis convallis! </p> <p> Enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. </p> <p> Ac, feugiat sed lectus vestibulum mattis ullamcorper velit? Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim? </p> <p> Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur! Neque sodales ut etiam sit amet nisl purus, in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non? </p> <p> Et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit! Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. </p> <p> Ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum tempus egestas sed sed risus pretium. Mauris pharetra et ultrices neque ornare aenean euismod elementum. </p> <p> Neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. </p> <p> Aliquet enim tortor, at auctor. Orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla! </p> <p> Risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque adipiscing commodo elit, at. Aenean vel elit scelerisque mauris pellentesque! </p> <p> Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero enim, sed faucibus turpis in eu mi bibendum? Venenatis tellus in metus vulputate! </p> <p> Ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at. Ut enim blandit volutpat maecenas volutpat blandit aliquam. </p> <p> Neque, vitae tempus quam pellentesque nec nam aliquam sem et tortor consequat id? Nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero. </p> <p> Elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum posuere? Nibh praesent tristique magna sit amet purus gravida? </p> <p> Sit amet justo donec enim diam, vulputate ut pharetra? Ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. </p> <p> Amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris! Pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in. </p> <p> Faucibus et molestie ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra? Libero volutpat sed cras ornare arcu dui vivamus arcu? </p> <p> Tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet? Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed? </p> <p> Porttitor lacus, luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet. Arcu dictum varius duis at consectetur lorem! </p> <p> Purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet! Enim, facilisis gravida neque convallis a cras semper auctor neque, vitae tempus quam pellentesque. </p> <p> Proin sed libero enim, sed faucibus turpis in eu mi bibendum neque egestas? Sagittis, nisl rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed. </p> <p> Massa, eget egestas purus viverra accumsan in nisl. Cras fermentum, odio eu feugiat pretium, nibh ipsum consequat nisl, vel pretium lectus quam id leo in vitae turpis massa sed elementum! </p> <p> Quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur! Orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa enim nec? </p> <p> Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus, dictum at tempor commodo, ullamcorper a. Eget est lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque habitant? </p> <p> Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sed blandit libero volutpat sed cras ornare arcu dui vivamus arcu felis, bibendum? </p> <p> Neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed blandit libero volutpat sed cras ornare arcu! Vel eros donec ac odio! </p> <p> Viverra vitae congue eu, consequat ac felis. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus nulla at volutpat. </p> <p> Est velit egestas dui, id ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum? </p> <p> Dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet! At auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci? </p> <p> Magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo? Cras adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros. </p> <p> Eget felis eget nunc lobortis mattis aliquam faucibus purus in massa tempor nec feugiat nisl! Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat! </p> <p> Mi tempus imperdiet nulla malesuada pellentesque elit eget? In eu mi bibendum neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc, sed! </p> <p> Accumsan sit amet nulla facilisi morbi. Gravida rutrum quisque non tellus orci, ac auctor augue mauris augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus. </p> <p> Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante? Sit amet facilisis magna etiam tempor, orci eu lobortis elementum, nibh tellus molestie nunc, non blandit massa! </p> <p> Sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis? Auctor eu augue ut lectus. </p> <p> Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis? Eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue. </p> <p> Risus, quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam! Non pulvinar neque laoreet suspendisse interdum consectetur libero, id faucibus nisl tincidunt eget nullam non nisi. </p> <p> Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae? </p> <p> Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et! Mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum, faucibus vitae aliquet nec, ullamcorper! </p> <p> Eu augue ut lectus arcu? Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc? </p> <p> Eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at varius vel? Et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis vulputate enim nulla aliquet. </p> <p> Viverra mauris, in aliquam sem fringilla ut morbi tincidunt? Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et tortor? </p> <p> Sit amet, dictum sit amet justo donec enim diam, vulputate ut pharetra sit amet, aliquam id diam maecenas ultricies mi eget mauris. Ipsum dolor sit amet, consectetur adipiscing elit duis. </p> <p> Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Nulla facilisi morbi tempus iaculis urna, id volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean et. </p> <p> Lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus! Eros, in cursus turpis massa tincidunt dui ut ornare. </p> <p> Tellus cras adipiscing enim eu? Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies? </p> <p> Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna? Eu scelerisque felis imperdiet proin. </p> <p> Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet! Amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim! </p> <p> Eget nunc scelerisque viverra mauris, in aliquam sem fringilla ut. Morbi leo urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing diam donec adipiscing? </p> <p> Ut placerat orci nulla pellentesque. Aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat? </p> <p> Mi sit amet mauris commodo quis! Viverra mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. </p> <p> Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo? </p> <p> Integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa? Viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas? </p> <p> Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet. Dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem sed risus ultricies? </p> <p> Integer quis auctor elit sed vulputate? Adipiscing enim eu turpis egestas pretium aenean pharetra, magna ac placerat vestibulum, lectus mauris ultrices eros, in cursus turpis massa tincidunt dui ut ornare. </p> <p> Nam aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit. Libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis? Pretium lectus quam id leo? </p> <p> Accumsan in nisl nisi, scelerisque eu ultrices vitae, auctor eu! Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget. </p> <p> Malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse? Maecenas pharetra convallis posuere morbi leo urna? </p> <p> Mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi. </p> <p> Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Ac tortor dignissim convallis aenean. </p> <p> Non arcu risus, quis varius quam quisque id diam vel. Ut consequat semper viverra nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec enim diam? </p> <p> Vitae, auctor eu augue ut lectus arcu, bibendum at! Aliquam vestibulum morbi blandit cursus risus, at ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus. </p> <p> Urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio! Hac habitasse platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus? </p> <p> Vitae tortor condimentum lacinia quis vel eros donec ac odio. Praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. </p> <p> Sed nisi lacus, sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat? Viverra accumsan in nisl nisi, scelerisque eu ultrices! </p> <p> Cursus turpis massa tincidunt dui ut ornare lectus sit amet est placerat. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales ut eu sem integer vitae justo? </p> <p> Pellentesque id nibh tortor, id aliquet lectus proin nibh nisl, condimentum id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et. Semper quis lectus nulla at! </p> <p> Elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes. Arcu dui vivamus arcu felis, bibendum ut tristique et, egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. </p> <p> Aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit, scelerisque in dictum non, consectetur a. </p> <p> Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus. </p> <p> Egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus mattis molestie a, iaculis at erat pellentesque. Maecenas volutpat blandit aliquam etiam erat velit. </p> <p> Sit amet purus gravida quis blandit turpis cursus? Platea dictumst quisque sagittis, purus sit amet volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris a diam maecenas sed enim. </p> <p> Etiam tempor, orci eu lobortis. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius duis at consectetur lorem donec massa sapien, faucibus et molestie! </p> <p> Aenean pharetra, magna ac placerat vestibulum, lectus mauris? Faucibus purus in massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. </p> <p> Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi! Dictum fusce ut placerat orci nulla pellentesque dignissim enim, sit amet venenatis urna cursus eget. </p> <p> Nunc sed velit dignissim sodales ut eu sem integer vitae justo eget magna fermentum iaculis eu non diam phasellus vestibulum lorem! A diam maecenas sed enim ut sem viverra aliquet! </p> </body> </html>