Window resize函数未触发及粘性导航适配异常求助

Hey there, let's work through this sticky nav resize issue together—it sounds like the resize event isn't updating the nav state properly when switching between mobile and desktop viewports. Here's how to fix it:

First, let's confirm if the resize event is triggering at all. Add a quick console log to your resize handler to test:

window.addEventListener('resize', () => {
  console.log(`Resize fired! Current width: ${window.innerWidth}`);
});

Resize your window (shrink then expand) and check the browser console. If you don't see these logs, double-check that your event listener is attached after the DOM loads (wrap it in DOMContentLoaded if needed).

The root issue is likely that your resize handling isn't fully syncing with the scroll-based sticky logic. Let's create a single function that handles both scroll and resize events, so the nav state is always consistent.

Add Debouncing (Optional but Recommended) #

Resize events fire a lot when dragging the window edge—debouncing prevents unnecessary function calls and improves performance:

let resizeDebounce;

// Shared function to update nav state
function updateStickyNav() {
  const nav = document.querySelector('.your-nav-selector'); // Replace with your nav's actual selector
  const viewportWidth = window.innerWidth;
  const scrollPosition = window.scrollY;

  // Desktop view (>=992px): apply sticky based on scroll position
  if (viewportWidth >= 992) {
    if (scrollPosition >= 550) { // Adjust this to match your "scroll to 550px" requirement
      nav.classList.add('sticky');
    } else {
      nav.classList.remove('sticky');
    }
  } 
  // Mobile view (<992px): force remove sticky regardless of scroll
  else {
    nav.classList.remove('sticky');
  }
}

// Attach the function to scroll and resize events
window.addEventListener('scroll', updateStickyNav);
window.addEventListener('resize', () => {
  clearTimeout(resizeDebounce);
  resizeDebounce = setTimeout(updateStickyNav, 200); // 200ms delay to avoid spam
});

// Initialize nav state on page load
document.addEventListener('DOMContentLoaded', updateStickyNav);

Double-Check Your CSS #

Make sure your .sticky class has the correct styles to enable the sticky behavior:

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Add any additional styling like background color or box-shadow here */
}

• Resize your window below 992px: the nav should immediately lose its sticky state, no matter how far you've scrolled.
• Resize back above 992px: the nav should switch back to sticky if you're scrolled past 550px, or stay non-sticky if you're near the top.
• Repeat resizing multiple times: the nav should consistently switch states based on viewport width.

This approach ensures every resize (and scroll) triggers a full re-evaluation of the nav's state, which should fix the "sticky stays on mobile" problem you're seeing.

内容的提问来源于stack exchange，提问作者Sam Ryan