滚动切换div为fixed定位时如何保留其原有格式？

Hey Paul, great question—this is a super common gotcha with fixed positioning! When you switch an element to position: fixed, it gets pulled out of the normal document flow, which means it loses:

• The space it was occupying (causing surrounding elements to shift)
• Its inherited layout context (like width, margins, and alignment relative to its parent)

Here are three reliable solutions to keep your #rotateTextCont looking exactly like it did in its original position:

1. Use a Placeholder Element to Preserve Layout Space #

When you make the element fixed, add a hidden "dummy" element in its original spot that matches its exact size. This prevents surrounding content from jumping:

$(window).scroll(function(e) {
  const $rotateCont = $('#rotateTextCont');
  const $subSolSec = $('#subSolSec');
  const scrollThreshold = $subSolSec.offset().top - 50;

  if ($(this).scrollTop() >= scrollThreshold) {
    // Switch back to relative and remove the placeholder
    $rotateCont.removeClass('fixed');
    $rotateCont.siblings('.fixed-placeholder').remove();
  } else {
    // Create placeholder if it doesn't exist
    if (!$rotateCont.siblings('.fixed-placeholder').length) {
      const placeholder = $('<div class="fixed-placeholder"></div>');
      // Copy exact dimensions and display style from the original element
      placeholder.css({
        height: $rotateCont.outerHeight(true), // Includes margins
        width: $rotateCont.outerWidth(true),
        display: $rotateCont.css('display')
      });
      $rotateCont.before(placeholder);
    }
    $rotateCont.addClass('fixed');
  }
});

Add this CSS to hide the placeholder visually but keep it in the flow:

.fixed-placeholder {
  visibility: hidden;
}

2. Explicitly Match Original Styles in Fixed State #

Fixed elements don't inherit width or margins the same way relative elements do. Define these properties explicitly in your CSS for the fixed class:

#rotateTextCont {
  /* Your original styles here */
  width: 100%; /* Or whatever your original width is */
  margin: 1rem 0;
}

#rotateTextCont.fixed {
  position: fixed;
  top: 0; /* Adjust to your desired fixed position */
  left: 0; /* Match original horizontal position (adjust if needed) */
  width: inherit; /* Or repeat the exact width value */
  margin: inherit;
}

If your element was centered or aligned inside a parent container, set the parent to position: relative and use left: auto instead of left: 0 to preserve that alignment.

3. Use position: sticky (Simpler Alternative) #

If your use case fits, position: sticky is built for this exact scenario—it acts like relative until it hits a scroll threshold, then switches to fixed without leaving the document flow. No placeholder needed!

First, set the base style:

#rotateTextCont {
  position: sticky;
  top: 0; /* Stick to the top of the viewport */
}

Then adjust your JS to disable sticky when scrolling into #subSolSec:

$(window).scroll(function(e) {
  const $rotateCont = $('#rotateTextCont');
  const $subSolSec = $('#subSolSec');
  const scrollThreshold = $subSolSec.offset().top - 50;

  if ($(this).scrollTop() >= scrollThreshold) {
    $rotateCont.css('position', 'relative');
  } else {
    $rotateCont.css('position', 'sticky');
  }
});

Sticky has great modern browser support, so this is usually the cleanest solution if it works for your layout.

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