javedbaloch4/scroll-detector.html

## scroll-detector.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="">
</head>
<body class="bg-gray-400">
    <div x-data="{ atTop: true }">
        <nav
            class="p-4 w-full fixed"
            :class="{ 'bg-white shadow-md' : !atTop }"
            @scroll.window="atTop = (window.pageYOffset > 40) ? false : true"
        >
            Top Nav goes here
        </nav>
        <div class="container mx-auto p-4 pt-16">
            Lorem ipsum dolor sit ametametametamet, 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.
            Lorem ipsum dolor sit ametametametamet, 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.
            Lorem ipsum dolor sit ametametametamet, 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.
            Lorem ipsum dolor sit ametametametamet, 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.
            Lorem ipsum dolor sit ametametametamet, 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>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Home</title>
	<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script>
	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
	<link rel="stylesheet" href="">
	</head>
	<body class="bg-gray-400">
	<div x-data="{ atTop: true }">
	<nav
	class="p-4 w-full fixed"
	:class="{ 'bg-white shadow-md' : !atTop }"
	@scroll.window="atTop = (window.pageYOffset > 40) ? false : true"
	>
	Top Nav goes here
	</nav>
	<div class="container mx-auto p-4 pt-16">
	Lorem ipsum dolor sit ametametametamet, 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.
	Lorem ipsum dolor sit ametametametamet, 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.
	Lorem ipsum dolor sit ametametametamet, 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.
	Lorem ipsum dolor sit ametametametamet, 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.
	Lorem ipsum dolor sit ametametametamet, 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>