Scroll Detection

scrimba

Watch in fullscreen

Scroll Detection

by Andre Madarang

Learn Alpine JS

About

Comments

Notes

Accordion Toggle and loops7:11

Scroll Detection

by Andre Madarang

Learn Alpine JS

Expand for more info

Accordion Toggle and loops7:11

scroll.html

run

preview

console

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js" defer></script>
    </head>
    <body class="bg-gray-400">
        <div>
            <nav class="p-4 w-full">
                Top Nav goes here
            </nav>        
            <div class="container mx-auto p-4 ">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maxime, enim omnis consequatur ratione odio voluptas pariatur nam recusandae, quidem ducimus placeat consectetur voluptate nostrum sit cupiditate animi atque, est fugiat ullam excepturi. Harum delectus voluptates fugit quibusdam aut magnam commodi autem cumque alias, rerum dolorum aperiam. Tempora explicabo sit rerum inventore et minima beatae assumenda vero ducimus eligendi. Doloremque nam, magnam, omnis natus vero debitis ducimus, laudantium mollitia possimus enim recusandae tempora cum amet. Mollitia eaque fuga maiores culpa in vero error quaerat ab, alias quam dicta eligendi magni voluptas dolorem consectetur perferendis praesentium modi, officiis quo distinctio facere ea! Vel, iste ratione veniam laudantium dolorum facere nulla laboriosam molestias vero quisquam eaque id necessitatibus omnis? Ducimus adipisci aperiam illo reiciendis molestias! Sequi placeat error in quasi temporibus quae non itaque ipsam, cupiditate eos, quas vel, velit veritatis labore, esse aut atque dolorum maxime perferendis enim ullam. Dolorum suscipit accusamus dignissimos eos odit consequuntur, corrupti ex dolore, inventore ab. Debitis deserunt, commodi enim! Nihil modi optio recusandae soluta incidunt enim placeat reprehenderit nam totam impedit qui minus, dolorum harum neque laudantium, facilis culpa omnis nesciunt eius mollitia! Vitae, modi deleniti porro fuga doloribus facilis voluptas eaque dicta unde molestias.
            </div>
        
        </div>
    </body>
</html>

<html>

<head>

defer></script>

</head>

<div>

Top Nav goes here

</nav>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maxime, enim omnis

consequatur ratione odio voluptas pariatur nam recusandae, quidem ducimus placeat

consectetur voluptate nostrum sit cupiditate animi atque, est fugiat ullam

excepturi. Harum delectus voluptates fugit quibusdam aut magnam commodi autem

cumque alias, rerum dolorum aperiam. Tempora explicabo sit rerum inventore et

minima beatae assumenda vero ducimus eligendi. Doloremque nam, magnam, omnis natus

-2:44