基于jQuery和CSS实现粘性头部收缩效果的技术求助

Hey there! I totally get your frustration with those bloated WordPress plugins that mess with code you can’t wrap your head around—let’s build this sticky shrinking header from scratch, step by step, so you understand every part of it.

This solution uses basic HTML, CSS, and vanilla JavaScript (no jQuery required) to create a smooth, customizable shrinking header that behaves just like premium WordPress plugin effects.

1. Basic HTML Structure #

First, adapt this to your WordPress theme’s existing header (look for <header> tags in your header.php file):

<header class="site-header">
  <div class="header-inner">
    <a href="#" class="site-logo">
      <img src="your-logo.png" alt="Site Logo">
    </a>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

2. CSS Styling #

This handles the sticky positioning, default state, and smooth transition to the shrunk state:

/* Reset default margins/paddings for consistency */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* Match your site's background */
  z-index: 1000; /* Ensure header stays above other content */
  padding: 20px 0; /* Default expanded padding */
  transition: all 0.3s ease; /* Smooth animation for all changes */
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

/* Logo styling with transition */
.site-logo img {
  height: 60px; /* Default logo size */
  transition: height 0.3s ease;
}

/* Navigation styling */
.site-nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
}

.site-nav a {
  text-decoration: none;
  color: #333; /* Match your site's text color */
  font-size: 18px;
  transition: font-size 0.3s ease;
}

/* Shrunk state - added via JavaScript on scroll */
.site-header.shrunk {
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add depth when shrunk */
}

.site-header.shrunk .site-logo img {
  height: 40px; /* Smaller logo in shrunk state */
}

.site-header.shrunk .site-nav a {
  font-size: 16px; /* Smaller text in shrunk state */
}

/* Prevent content from hiding under fixed header */
body {
  padding-top: 100px; /* Match this to your header's expanded height */
}

3. Simple JavaScript #

This listens for scroll events and toggles the shrunk state:

// Wait for the page to fully load
document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.site-header');
  const scrollThreshold = 50; // Shrink header after scrolling 50px down

  // Listen for scroll movement
  window.addEventListener('scroll', function() {
    if (window.scrollY > scrollThreshold) {
      header.classList.add('shrunk');
    } else {
      header.classList.remove('shrunk');
    }
  });
});

WordPress Integration Tips #

• Enqueue assets properly: Add this to your theme’s functions.php to load the CSS/JS correctly:

  function custom_sticky_header_assets() {
    wp_enqueue_style( 'sticky-header-style', get_stylesheet_directory_uri() . '/sticky-header.css', array(), '1.0' );
    wp_enqueue_script( 'sticky-header-script', get_stylesheet_directory_uri() . '/sticky-header.js', array(), '1.0', true );
  }
  add_action( 'wp_enqueue_scripts', 'custom_sticky_header_assets' );
  

• Tweak values: Adjust padding, height, and scrollThreshold to match your site’s design.
• Test on mobile: Add media queries to adjust the header for smaller screens if needed.

This implementation is lightweight, easy to modify, and gives you full control—no mysterious plugin code to debug!

内容的提问来源于stack exchange，提问作者O.k