使用onscroll动态修改div高度失效，滚动日志不匹配求助

First, let's break down the core issues in your current code:

1. Scroll Direction Jitter: Your code triggers height changes on every scroll event tick, which causes multiple increments/decrements even for a single scroll gesture—leading to mismatched console logs and inconsistent height values.
2. Missing Layout Structure: You haven't styled the nav elements to behave like the Fantasy Premier League example (fixed positioning, distinct heights, smooth transitions), which is critical for the desired effect.
3. Choppy Height Adjustment: Incrementing/decrementing height by 1px per scroll tick is inefficient and leads to unreliable results. Instead, we should animate to target heights based on scroll direction and position.

Here's the revised code to achieve your goal:

HTML (Minor Tweaks) #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <nav>
    <div class='topnav'>
      <div class='img'>
        <!-- Add your polygon shape/content here -->
      </div>
    </div>
    <div class='bottomnav'>
      Gray Fixed Nav
    </div>
  </nav>
  <div class='main'>
    I am main content<br><br>
    Scroll down to see the nav transition!
  </div>
</div>

CSS (Critical for Layout & Animation) #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 2000px;
  padding-top: 100px; /* Account for initial combined nav height */
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.topnav {
  height: 60px;
  background: white;
  transition: transform 0.3s ease; /* Smooth hide/show animation */
}

.bottomnav {
  height: 40px;
  background: #888;
  color: white;
  padding: 10px 20px;
}

.img {
  height: 60px; /* Match initial topnav height */
  width: 100%;
  background: #ccc; /* Placeholder for your polygon */
  transition: height 0.3s ease; /* Smooth height transition */
}

/* Class to hide topnav when scrolling down */
.topnav.hidden {
  transform: translateY(-100%);
}

JavaScript (Fixed Scroll Logic) #

$(document).ready(function() {
  var lastScrollTop = 0;
  var scrollThreshold = 5; // Ignore tiny scrolls to prevent jitter
  var $topNav = $('.topnav');
  var $img = $('.img');
  var topNavHeight = $topNav.outerHeight();
  var bottomNavHeight = $('.bottomnav').outerHeight();

  $(window).scroll(function() {
    var st = $(this).scrollTop();

    // Skip small scroll movements to avoid false direction triggers
    if (Math.abs(st - lastScrollTop) <= scrollThreshold) {
      return;
    }

    if (st > lastScrollTop) {
      // Downscroll
      console.log('downward');
      // Hide topnav and adjust .img height when scroll past topnav
      if (st > topNavHeight) {
        $topNav.addClass('hidden');
        $img.height(bottomNavHeight);
      }
    } else {
      // Upscroll
      console.log('upward');
      // Show topnav and reset .img height when scrolling back up
      if (st <= topNavHeight) {
        $topNav.removeClass('hidden');
        $img.height(topNavHeight);
      }
    }

    lastScrollTop = st;
  }).scroll(); // Trigger initial scroll check to set correct state
});

Key Improvements Explained: #

• Scroll Threshold: Added a 5px threshold to ignore tiny scroll movements, eliminating jitter and mismatched console logs.
• Smooth Transitions: Used CSS transitions for both the topnav's visibility and the .img div's height, creating a polished, FPL-style animation.
• Target Height Setting: Instead of incrementing height by 1px, we directly set the .img height to match either the topnav or bottomnav height based on scroll position, ensuring it's always in the correct place.
• Fixed Nav Layout: Styled the nav elements to stay fixed at the top, with distinct heights, so the bottomnav remains visible while the topnav hides on downscroll.

Customization Tips: #

• Replace the .img background with your polygon shape (using CSS clip-path or an image).
• Adjust topNavHeight and bottomNavHeight values to match your desired nav sizes.
• Modify the transition duration in CSS to make the animation faster or slower.

内容的提问来源于stack exchange，提问作者R.Thompson