如何实现按钮移动时区块高度动态变化？按钮与区块高度联动的优化方案问询

Got it, let's fix this issue for you! The core problem here is that when you hide the content right now, you're only modifying opacity and visibility—the element still takes up space on the page, which is why the .sticky-category block's height doesn't change.

Below is a polished solution that not only fixes the dynamic height adjustment but also makes the button's movement smoother and more logical:

Updated Code Implementation #

HTML #

<div class="sticky-category">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in felis in felis placerat pulvinar. Sed eget fermentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque placerat condimentum laoreet. Mauris facilisis mi tellus, a blandit magna viverra in. Aenean varius pretium elit vitae finibus. Fusce vel cursus tellus, non sollicitudin mi.</div>
  <button class="toggle-button">Show</button>
</div>
<div style="height: 500px;"></div>

CSS #

.sticky-category {
  position: sticky;
  top: 20px;
  height: auto;
  z-index: 999;
  background-color: #ccc;
  padding: 10px; /* Adds spacing for cleaner layout */
  transition: all 0.2s ease-in-out;
}

.content {
  max-height: 2000px; /* A sufficiently large value to fit all content */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 1;
}

/* State for hidden content: collapses height to 0 */
.content.hidden-content {
  max-height: 0;
  opacity: 0;
}

.toggle-button {
  display: none;
  max-width: 200px;
  margin: 10px auto 0; /* Keeps spacing from content */
  padding: 10px;
  background-color: rgb(191,79,203);
  border-radius: 50px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: all 0.5s ease-in-out; /* Smooths button movement */
}

.toggle-button:hover {
  background-color: rgb(143,62,184);
}

/* Show button when needed */
.toggle-button.show {
  display: block;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function () {
  const contentBlock = document.querySelector('.content');
  const toggleButton = document.querySelector('.toggle-button');

  // Reusable function to set content and button state
  function setContentState(isVisible) {
    if (isVisible) {
      contentBlock.classList.remove('hidden-content');
      toggleButton.textContent = 'Hide';
      toggleButton.classList.add('show');
    } else {
      contentBlock.classList.add('hidden-content');
      toggleButton.textContent = 'Show';
      toggleButton.classList.add('show');
    }
  }

  // Toggle content visibility on button click
  function toggleVisibility() {
    const isCurrentlyVisible = !contentBlock.classList.contains('hidden-content');
    setContentState(!isCurrentlyVisible);
  }

  // Handle scroll events
  window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
      setContentState(false); // Hide content, show "Show" button
    } else {
      setContentState(true); // Show content, show "Hide" button
      // Uncomment below if you want to hide the button when back to top
      // toggleButton.classList.remove('show');
    }
  });

  // Register click handler
  toggleButton.addEventListener('click', toggleVisibility);

  // Set initial state based on scroll position
  setContentState(window.scrollY <= 50);
});

Key Improvements Explained #

• Dynamic Block Height: Instead of using opacity and visibility alone, we use max-height to collapse the content to 0 when hidden. This makes the parent .sticky-category block shrink automatically since the content no longer occupies space.
• Smoother Button Movement: The button now moves naturally as the content expands/collapses, thanks to its top margin and transition property. We removed the clunky transform + setTimeout logic for a more intuitive flow.
• Simplified Logic: The setContentState function centralizes state management, so both scroll and click events use the same logic—no redundant code, easier to maintain.
• Initial State Handling: The page checks the scroll position on load to set the correct initial state, preventing weird layout glitches.

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