基于滚动位置修改CSS：仿Duolingo模板标题与顶部栏样式调整求助

Hey there! Let's figure out why your scroll-based header tweaks aren't landing like you want for your Duolingo clone. Your current setInterval approach is likely causing inconsistent behavior, plus there are a few common pitfalls with CSS priority and event handling that we can fix right away.

First: Ditch setInterval for a Scroll Event Listener #

setInterval runs on a timer regardless of whether the user is scrolling, which is inefficient and can miss quick scroll changes. Instead, bind directly to the window's scroll event—it's cleaner and more reliable:

// Wait for DOM to be fully loaded first (critical!)
$(document).ready(function() {
  $(window).on('scroll', function() {
    var scrollHeight = $(this).scrollTop();
    
    // Target your header label and start button
    var headerLabel = $('.long-header-label');
    var startBtn = $('.btn-start-index');
    
    if (scrollHeight < 120) {
      // Scrolled to top: full-size header, show button
      headerLabel.css('font-size', '34px');
      startBtn.css({
        'visibility': 'visible',
        'opacity': '1',
        'transition': 'opacity 0.3s ease' // Add smooth transition for Duolingo-style polish
      });
    } else {
      // Scrolled past threshold: shrink header, hide button
      headerLabel.css('font-size', '20px'); // Adjust size to match Duolingo's collapsed header
      startBtn.css({
        'visibility': 'hidden',
        'opacity': '0',
        'transition': 'opacity 0.3s ease'
      });
    }
  });
  
  // Trigger scroll event on page load to set initial state
  $(window).trigger('scroll');
});

Second: Fix CSS Priority Issues #

If your styles still aren't applying, it's probably because your external CSS has higher priority (like using !important or more specific selectors). Instead of inline CSS via JS, use CSS classes—this is way more maintainable and avoids priority fights:

Add These CSS Classes:

/* Default header state */
.long-header-label {
  font-size: 34px;
  transition: font-size 0.3s ease; /* Smooth size transition */
}

/* Collapsed header state */
.long-header-label.collapsed {
  font-size: 20px;
}

/* Default button state */
.btn-start-index {
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease;
}

/* Hidden button state */
.btn-start-index.hidden {
  visibility: hidden;
  opacity: 0;
}

/* Top bar styling to match Duolingo */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  background-color: #58CC02; /* Duolingo's signature green */
  color: white;
  transition: all 0.3s ease;
  z-index: 1000; /* Ensure it stays above content */
}

.top-bar.collapsed {
  padding: 0.5rem 2rem;
  background-color: rgba(88, 204, 2, 0.9); /* Slightly transparent when scrolled */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Add subtle depth like Duolingo */
}

Update Your JS to Use Classes:

$(document).ready(function() {
  $(window).on('scroll', function() {
    var scrollHeight = $(this).scrollTop();
    var isCollapsed = scrollHeight >= 120;
    
    $('.long-header-label').toggleClass('collapsed', isCollapsed);
    $('.btn-start-index').toggleClass('hidden', isCollapsed);
    $('.top-bar').toggleClass('collapsed', isCollapsed); // Add top bar collapse behavior
  });
  
  $(window).trigger('scroll');
});

Third: Double-Check jQuery Setup #

Make sure you're loading jQuery before your custom script. If you're using a CDN, add this in your <head> or right before </body>:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

If you're using jQuery in no-conflict mode, replace all $ with jQuery in your code.

Quick Duolingo-Style Polish Tips #

• Add a padding-top to your main content equal to the height of your top bar so content doesn't get hidden under it.
• Match Duolingo's font stack: font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
• Test on mobile—Duolingo's header collapses even faster on small screens, so adjust the scroll threshold (120px) to a smaller value for mobile viewports.

内容的提问来源于stack exchange，提问作者persian tiktak