Back to Discover
Tailwind CSS Sticky Header Example

Amelia
Created Nov 03, 2025
1 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50">
  <!-- Sticky Header -->
  <header 
          x-data="{ 
                  isScrolled: false, 
                  mobileMenuOpen: false,
                  init() {
                  window.addEventListener('scroll', () => {
                  this.isScrolled = window.scrollY > 20;
                  });
                  }
                  }"
          :class="isScrolled ? 'shadow-lg bg-gradient-to-r from-blue-900 to-blue-800' : 'bg-gradient-to-r from-blue-950 to-blue-900'"
          class="sticky top-0 z-50 transition-all duration-300"
          >
    <nav class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <ion-icon name="rocket-outline" class="text-white text-3xl"></ion-icon>
          <span class="text-white text-xl font-bold">BrandName</span>
        </div>

        <!-- Desktop Navigation -->
        <div class="hidden md:flex items-center space-x-8">
          <a href="#home" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-1">
            <ion-icon name="home-outline"></ion-icon>
            <span>Home</span>
          </a>
          <a href="#about" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-1">
            <ion-icon name="information-circle-outline"></ion-icon>
            <span>About</span>
          </a>
          <a href="#services" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-1">
            <ion-icon name="briefcase-outline"></ion-icon>
            <span>Services</span>
          </a>
          <a href="#contact" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-1">
            <ion-icon name="mail-outline"></ion-icon>
            <span>Contact</span>
          </a>
        </div>

        <!-- CTA Button (Desktop) -->
        <div class="hidden md:block">
          <button class="bg-white text-blue-900 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition-colors duration-200">
            Get Started
          </button>
        </div>

        <!-- Mobile Menu Button -->
        <button 
                @click="mobileMenuOpen = !mobileMenuOpen"
                class="md:hidden text-white text-2xl focus:outline-none"
                >
          <ion-icon :name="mobileMenuOpen ? 'close-outline' : 'menu-outline'"></ion-icon>
        </button>
      </div>

      <!-- Mobile Menu -->
      <div 
           x-show="mobileMenuOpen"
           x-transition:enter="transition ease-out duration-200"
           x-transition:enter-start="opacity-0 transform -translate-y-2"
           x-transition:enter-end="opacity-100 transform translate-y-0"
           x-transition:leave="transition ease-in duration-150"
           x-transition:leave-start="opacity-100 transform translate-y-0"
           x-transition:leave-end="opacity-0 transform -translate-y-2"
           class="md:hidden pb-4"
           >
        <div class="flex flex-col space-y-3">
          <a href="#home" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-2 py-2">
            <ion-icon name="home-outline"></ion-icon>
            <span>Home</span>
          </a>
          <a href="#about" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-2 py-2">
            <ion-icon name="information-circle-outline"></ion-icon>
            <span>About</span>
          </a>
          <a href="#services" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-2 py-2">
            <ion-icon name="briefcase-outline"></ion-icon>
            <span>Services</span>
          </a>
          <a href="#contact" class="text-gray-200 hover:text-white transition-colors duration-200 flex items-center space-x-2 py-2">
            <ion-icon name="mail-outline"></ion-icon>
            <span>Contact</span>
          </a>
          <button class="bg-white text-blue-900 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition-colors duration-200 mt-2">
            Get Started
          </button>
        </div>
      </div>
    </nav>
  </header>

  <!-- Hero Section -->
  <section id="home" class="bg-gradient-to-br from-blue-50 to-blue-100 py-20">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h1 class="text-4xl md:text-5xl font-bold text-blue-950 mb-4">Sticky Header Example</h1>
      <p class="text-lg text-blue-800 mb-8">Scroll down to see the header stick to the top with a smooth transition</p>
      <ion-icon name="arrow-down-outline" class="text-blue-900 text-4xl animate-bounce"></ion-icon>
    </div>
  </section>

  <!-- Content Sections -->
  <section id="about" class="py-20 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="text-3xl font-bold text-blue-950 mb-6">About Section</h2>
      <p class="text-gray-700 leading-relaxed mb-4">
        This is a professional sticky header implementation using Tailwind CSS, Alpine.js, and Ionicons. 
        The header features a dark blue gradient that becomes more prominent as you scroll.
      </p>
      <p class="text-gray-700 leading-relaxed">
        Notice how the header smoothly transitions and adds a shadow effect when you scroll past the hero section, 
        creating a modern and polished user experience.
      </p>
    </div>
  </section>

  <section id="services" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="text-3xl font-bold text-blue-950 mb-6">Services Section</h2>
      <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-lg shadow-md">
          <ion-icon name="code-outline" class="text-blue-900 text-4xl mb-3"></ion-icon>
          <h3 class="text-xl font-semibold text-blue-950 mb-2">Web Development</h3>
          <p class="text-gray-600">Building modern, responsive websites with cutting-edge technologies.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md">
          <ion-icon name="phone-portrait-outline" class="text-blue-900 text-4xl mb-3"></ion-icon>
          <h3 class="text-xl font-semibold text-blue-950 mb-2">Mobile Apps</h3>
          <p class="text-gray-600">Creating seamless mobile experiences for iOS and Android platforms.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md">
          <ion-icon name="analytics-outline" class="text-blue-900 text-4xl mb-3"></ion-icon>
          <h3 class="text-xl font-semibold text-blue-950 mb-2">Analytics</h3>
          <p class="text-gray-600">Data-driven insights to help grow your business effectively.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="contact" class="py-20 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="text-3xl font-bold text-blue-950 mb-6">Contact Section</h2>
      <p class="text-gray-700 leading-relaxed mb-8">
        Keep scrolling to see more content, or scroll back up to see the header transition again. 
        The sticky positioning ensures the navigation is always accessible.
      </p>
      <div class="flex items-center space-x-4">
        <ion-icon name="location-outline" class="text-blue-900 text-2xl"></ion-icon>
        <span class="text-gray-700">123 Business St, City, Country</span>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gradient-to-r from-blue-950 to-blue-900 text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <p>&copy; 2026 BrandName. All rights reserved.</p>
    </div>
  </footer>
Comments (0)

No comments yet. Be the first!