响应式屏幕下解决Try Now按钮动画与Toggle Navigation按钮重叠问题

Let's resolve the animation overlap issue step by step, focusing on responsive behavior and syncing with your existing navigation logic:

1. Add a State Class to Track Navigation Panel Visibility #

First, we need a way to detect when the navigation panel is open in our CSS. We'll add a class to the <body> element whenever the panel is toggled on, and remove it when it's closed.

Update your existing Toggle Navigation click handler:

// Assuming your toggle button has a class like 'toggle-nav-btn'
document.querySelector('.toggle-nav-btn').addEventListener('click', function() {
  const navPanel = document.getElementById('panal'); // Note: your ID is 'panal' as per your code
  const body = document.body;
  
  // Toggle panel visibility
  navPanel.classList.toggle('open');
  // Sync body class to track panel state
  body.classList.toggle('nav-panel-active');
});

// Also, remove the class when scrolling down (panel hides)
window.addEventListener('scroll', function() {
  const body = document.body;
  if (window.scrollY > yourScrollThreshold) { // Replace with your actual scroll threshold value
    body.classList.remove('nav-panel-active');
    document.getElementById('panal').classList.remove('open');
  }
});

2. Adjust Animation Keyframes for Responsive Scenarios #

Next, we'll modify the "Try Now" button's animation to avoid the Toggle button area when the nav panel is open. We'll use media queries to target only small screens where the Toggle button appears, and override the animation keyframes when the nav-panel-active class is present.

First, define your base animation (for when the panel is closed):

.try-now-btn {
  position: fixed; /* Assuming it's fixed positioned based on your setup */
  /* Keep your existing styles */
  animation: tryNowSlide 2s infinite ease-in-out;
}

@keyframes tryNowSlide {
  0% { transform: translateX(0); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

Then, add the adjusted animation for when the nav panel is open on small screens:

/* Replace 768px with your actual breakpoint where the Toggle button appears */
@media (max-width: 768px) {
  body.nav-panel-active .try-now-btn {
    animation: tryNowSlideAdjusted 2s infinite ease-in-out;
  }

  /* Define CSS variables for easy adjustment */
  :root {
    --toggle-btn-width: 55px; /* Match your Toggle button's actual width */
    --gap: 10px; /* Space between Toggle button and Try Now button */
  }

  @keyframes tryNowSlideAdjusted {
    0% { transform: translateX(calc(var(--toggle-btn-width) + var(--gap))); }
    50% { transform: translateX(calc(var(--toggle-btn-width) + var(--gap) + 20px)); }
    100% { transform: translateX(calc(var(--toggle-btn-width) + var(--gap))); }
  }
}

3. Verify Edge Cases #

• Scrolling up with panel open: The nav-panel-active class stays on the body, so the adjusted animation runs, keeping the button away from the Toggle.
• Closing the panel: The class is removed, and the button reverts to its original animation.
• Scrolling down: The panel hides, the class is removed, and the animation goes back to normal.

4. Quick Note: Possible Typo #

I noticed your panel ID is #panal (missing an 'e' in 'panel'). If that's intentional, great! But if it's a typo, correcting it will avoid any unexpected behavior in your code.

内容的提问来源于stack exchange，提问作者Balkar Kalsi