Tailwind & Alpinejs演示滚动后修改DIV背景颜色

Tailwind & Alpinejs演示滚动后修改DIV背景颜

源代码

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
        
    <div
      x-data="{ scroll: false }"
      @scroll.window="scroll = (window.pageYOffset > 50) ? true : false"
      :class="{ 'bg-red-800': scroll, 'bg-transparent': !scroll }"
      class="w-full fixed top-0 p-20 text-2xl flex flex-col justify-center items-center transition-colors duration-500 ease-in-out">
      <h1>Scroll to see effect</h1>
    </div>