0

У меня есть два блока, красный и синий. Красный - больше по высоте, синий - меньше.

Мне нужно сделать так, чтобы сначала скроллились оба блока, когда мы доходим до конца синего блока ( он меньше ), то блок фиксируется, а красный продолжает пролистываться. Мне это нужно сделать, чтобы между синим блоком и подвалом не было пустого пространства.

Подскажите, как можно зафиксировать синий блок, когда мы доходим до его конца? Я пробовал через position: sticky, не выходит. Я не понимаю, какой нужно задать top в пикселях.

Спасибо за любую подсказку.

https://codesandbox.io/s/blissful-meadow-y84jiy?file=/index.html

2
  • И еще можно отследить через Intersection Observer API, когда появляется конец синего блока, но какие стили на него повесить я все равно не могу понять.
    – IvanCoin
    22 июн 2022 в 13:16
  • Есть мнение, что sticky работает немного иначе. Уверен, ещё и флексы добавляют всякого.
    – Quazimorda
    22 июн 2022 в 14:03

1 ответ 1

0

Костыли под костылями, супер ...

P.S: Извините, но вы очень капризный (ая) ^_~

const scrollBlock = document.querySelector('.scroll-block');
const scrollElem = document.querySelector('.block-2__sticky');
let elementPosY = scrollElem.offsetTop + scrollElem.offsetHeight;
let scollBlockPosY = scrollBlock.offsetTop + scrollBlock.offsetHeight;

let windowH = window.innerHeight;

window.addEventListener('scroll', () => {
  if (window.scrollY > scollBlockPosY - windowH) {
    scrollElem.style.marginTop = scollBlockPosY - elementPosY + 'px';
    return;
  }

  if (window.scrollY < elementPosY - windowH) {
    scrollElem.style.marginTop = 0;
    return;
  }

  if (window.scrollY > elementPosY - windowH && window.scrollY + windowH < scollBlockPosY) {
    scrollElem.style.marginTop = window.scrollY - elementPosY + window.innerHeight + 'px';
  }
})
body {
  font-size: 40px;
  font-family: sans-serif;
}

.row {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.the-end {
  margin-top: 40px;
  color: aliceblue;
}

.block-1 {
  flex: 0 1 50%;
  padding: 40px;
  background: #ae113d;
}

.block-2 {
  flex: 0 1 50%;
  padding-left: 20px;
}

.block-2__sticky {
  position: relative;
  background: #1b53b8;
  padding: 30px;
}

footer {
  height: 100px;
  width: 100%;
  background: #00c13f;
}
<body>
  <div class="row scroll-block">
    <div class="block-1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae deleniti doloremque est eum quis, similique ullam unde ut. Amet animi architecto asperiores aspernatur blanditiis consectetur dolorem doloremque doloribus ea explicabo illum itaque iusto,
      labore laboriosam maiores molestias nobis obcaecati odit porro quae quaerat reiciendis rerum sunt suscipit voluptatem! Assumenda aut, beatae dolorem ipsum reprehenderit similique velit vero? Architecto aspernatur dicta eos esse est et explicabo
      facere hic illum impedit iure necessitatibus nemo non nulla officiis perspiciatis porro possimus quae quibusdam rerum sequi, soluta ullam velit vitae voluptatem. A, distinctio dolore impedit libero modi quo rem voluptas? Alias explicabo repellat
      sint. Blanditiis enim ex illo odit rerum vel voluptatum! Commodi esse expedita illum incidunt laborum nulla pariatur quia, tempore. Ad, aliquid aut blanditiis commodi cum dolore eius, eos in iste odio perspiciatis quae rem tempora ut veniam. Aliquid
      deleniti facere laborum molestias nesciunt nulla possimus qui sapiente tenetur. Asperiores corporis ea eaque eos expedita, iure, magni maiores maxime neque nobis quia tempora ut, voluptatem! A animi, aut ducimus eveniet excepturi exercitationem,
      harum incidunt natus nisi praesentium quaerat quas quasi qui reprehenderit rerum sunt vitae voluptate. Aliquam aliquid amet aspernatur beatae deserunt doloribus dolorum eligendi, enim error expedita explicabo, harum inventore itaque labore laboriosam
      nam, nesciunt nobis non odit omnis porro quibusdam repudiandae tempore ullam voluptas. Fugit impedit minus perspiciatis repudiandae. Ab, architecto assumenda beatae corporis culpa eum exercitationem ipsa obcaecati possimus provident qui, quia quo
      quos saepe soluta temporibus, ut! Alias autem consequatur cupiditate dolore ipsa nam neque nisi numquam, quis ullam vel voluptate voluptatibus. Accusamus aut commodi consectetur debitis dolor eligendi, eum expedita ipsa iste iure natus nostrum numquam
      odit officia, quis reiciendis similique ut, vel velit voluptatem! Animi asperiores, aspernatur assumenda beatae consequuntur corporis doloremque ea exercitationem incidunt labore nemo odio odit quas quod reiciendis repudiandae sequi similique sit
      sunt veniam? Adipisci at deleniti ipsa ipsam officiis quaerat quam quidem repudiandae saepe suscipit! A, accusantium aut consequuntur cupiditate dolor dolorem enim eos error et fugit illum inventore labore laudantium maiores modi necessitatibus
      neque nulla officia possimus quae quidem repellat reprehenderit sunt tenetur unde vel voluptatum! Aut corporis culpa deserunt ea eos excepturi incidunt, ipsam magnam modi odit officia quos sequi suscipit totam unde velit voluptate? Accusamus, beatae
      blanditiis consequuntur corporis cupiditate deleniti dicta distinctio ducimus eos et ex, illo libero nihil placeat quae quam quisquam repellat? Alias animi aspernatur aut beatae commodi consectetur dolore ducimus eaque error et facere fuga fugit
      harum iusto maxime minima minus mollitia nostrum nulla odit officiis omnis pariatur placeat quaerat quibusdam quod ratione reiciendis rem reprehenderit repudiandae, similique tenetur velit vero? Blanditiis dolores, eligendi impedit ipsam, ipsum
      molestias nihil odit optio quaerat quibusdam rem repellendus sapiente. Aliquid commodi deleniti eius explicabo fugiat fugit iure laboriosam, libero minima molestias nam neque nesciunt quis ratione sed tempora tempore veniam? Ab amet aperiam assumenda
      blanditiis culpa, debitis eaque eos esse expedita ipsa itaque iusto, magnam officia optio quasi sequi sunt veniam. At exercitationem illo iusto laudantium, perferendis possimus voluptatum. Accusamus, consequuntur, dignissimos distinctio doloribus
      ea illo labore magnam non omnis pariatur quaerat quis ratione sed similique suscipit. Accusantium adipisci distinctio dolor explicabo hic iste iusto laboriosam natus praesentium, rerum, similique unde velit voluptatem! Hic laudantium porro tempore.
      Accusamus at blanditiis doloremque facere illum libero nesciunt perferendis quia unde. Debitis dolore nemo nulla pariatur sunt! Alias amet cum eum exercitationem fugit ipsum placeat quam. Eos incidunt libero porro vero. Accusantium blanditiis cum
      earum, facere ipsam magnam maxime neque optio quae quo rerum sed sunt suscipit tempora vitae voluptatem voluptates? Delectus enim excepturi laboriosam magni molestiae molestias odit quae, quas quibusdam recusandae rerum voluptatum! A assumenda commodi,
      consectetur deleniti ea eligendi et ex explicabo facilis harum, incidunt laborum molestiae nulla odio odit perferendis porro reprehenderit sunt, tenetur ullam velit veritatis vero. A atque doloremque, fugit maiores minima officiis provident quasi
      sunt veritatis vitae! Aspernatur, autem ullam! A ad at, consectetur consequatur doloribus eveniet facilis fuga illum in incidunt magni molestiae necessitatibus nemo nesciunt odio quas quasi, qui ut! Aspernatur libero minus nemo quibusdam repellendus.
      Ad consectetur dignissimos dolore ea excepturi ipsa labore nulla quis sequi tempora. Consequuntur delectus dicta ea est eveniet, facere fugiat numquam quaerat quis reiciendis repellendus sed totam! A animi beatae doloribus earum et exercitationem
      facere ipsa, iure modi necessitatibus quam quibusdam repudiandae sed sequi, ullam veniam vero! Adipisci, eaque esse excepturi harum nihil odio similique velit? Aspernatur consectetur cum fuga fugit iste magni nesciunt nostrum optio sed, totam. Aliquid
      aperiam beatae consequatur consequuntur cupiditate distinctio, dolorem id illo maiores minus quaerat quibusdam, reprehenderit unde veritatis voluptates! A, accusantium assumenda consequatur corporis cupiditate delectus deleniti dicta dolorem ea
      eius est eveniet exercitationem explicabo fugiat fugit illo in labore laudantium libero maiores maxime minus natus odio perferendis quam quisquam ratione recusandae, rem repudiandae similique sint sunt tenetur vero vitae voluptas voluptates voluptatum!
      Cupiditate esse, fugiat ipsum iusto maxime nam odio pariatur repellat repudiandae sapiente ut, vitae, voluptatibus? Aspernatur eaque et
    </div>
    <div class="block-2">
      <div class="block-2__sticky">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iusto obcaecati optio repellat reprehenderit sapiente suscipit, tempora? Asperiores cum dignissimos exercitationem, hic iusto labore, minima nihil placeat quidem, ratione recusandae ut
        voluptatem voluptates! Amet consequatur cum ea eligendi hic necessitatibus officiis, veritatis. Ad consequatur dicta eaque eligendi eum explicabo illo incidunt itaque libero minima neque nobis officia porro possimus quibusdam quis quos rem sunt
        totam, velit? A alias aliquid consectetur corporis dolor, dolore dolorum earum eum ex facere iste itaque labore laboriosam, nemo nobis non optio pariatur placeat praesentium reprehenderit repudiandae sequi vel veritatis voluptate voluptatum. Amet
        beatae, eos eum expedita facere fugiat inventore maxime, modi mollitia nemo possimus quisquam quo recusandae soluta vero. Aliquid blanditiis corporis illo nulla voluptatem? Aliquid architecto cumque deserunt mollitia perferendis. Cumque dicta
        doloremque ducimus est molestiae nemo quod? Alias aperiam consectetur dignissimos dolorum ducimus eos error expedita facere nobis, optio quia similique temporibus, unde! Beatae quis reprehenderit saepe? Aliquam consequatur ex expedita, impedit
        laboriosam magnam necessitatibus neque nihil, perferendis porro quas recusandae reprehenderit, similique? Aliquid asperiores, hic illo nisi omnis voluptatem! Aspernatur assumenda consequuntur cupiditate earum fugiat impedit necessitatibus optio
        possimus! Asperiores consectetur, debitis et ex maiores minus obcaecati pariatur perspiciatis provident, quisquam reprehenderit repudiandae similique sit tempora ut velit voluptate. Blanditiis dicta, dignissimos mollitia praesentium qui velit.
        Aliquam assumenda consectetur, culpa cumque deleniti dignissimos, dolor doloribus ducimus eveniet hic incidunt iste laudantium molestiae natus odit, officiis perspiciatis quaerat quidem repellendus rerum sed veniam veritatis voluptates! Ab ad
        architecto asperiores autem consectetur debitis distinctio eos facilis fugiat illo in ipsa iste laboriosam laborum laudantium minima minus molestias mollitia natus nemo omnis perspiciatis placeat reiciendis reprehenderit, repudiandae sed similique
        sit soluta temporibus vel velit veritatis voluptas voluptatem! Accusamus aliquid asperiores aspernatur atque blanditiis deserunt dolorem dolorum et eum eveniet hic illo in inventore itaque iusto, laudantium maiores mollitia neque nisi obcaecati
        praesentium, quasi quia quis quo recusandae reprehenderit rerum similique sint soluta tempore ullam unde vero voluptatem! Accusantium alias consectetur deserunt dolor dolorum
        <div class="the-end">
          Конец. Здесь синий блок должен перестать пролистываться и зафиксироваться, красный должен продолжать скроллиться.
        </div>
      </div>
    </div>
  </div>
  <footer></footer>
</body>

1
  • о, круто. Только бы еще скачка не было, синий блок сначала до самого верха проскролливается, а потом вниз скачок происходит.
    – IvanCoin
    22 июн 2022 в 14:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.