JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

scroll
<div class="content--box" ui-scroll-box>
  <div class="content--item">
    <strong ui-scroll-box-float>제목</strong>
    <strong class="a111" ui-scroll-box-float>제목</strong>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sequi voluptates reprehenderit culpa ex, laudantium cumque. Cumque quas expedita, illo facere modi asperiores dolor deleniti, nobis id voluptatum qui? Eligendi!</span>
      <span>Ullam amet pariatur placeat earum neque quia consectetur sit. Laboriosam optio atque dicta, nemo vero debitis amet architecto sapiente voluptatibus, expedita ipsam pariatur rerum nam fuga provident alias quasi est.</span>
      <span>Commodi error quasi itaque voluptates facilis, quia earum quod expedita similique, ab nam dolores vel neque dicta quas facere, temporibus inventore numquam! Tenetur, alias suscipit numquam ea perspiciatis assumenda molestias!</span>
      <span>Eum velit error suscipit quibusdam porro maiores, possimus et eveniet veniam, fugit facere magnam nesciunt tenetur. Quam est maiores optio, deserunt quo, provident sapiente odit voluptatum magni consequuntur, veniam suscipit.</span>
      <span>Quas eos aliquid, id commodi totam iusto, modi, quibusdam molestiae, fugiat maiores excepturi placeat vel voluptate numquam. Perferendis soluta quo doloribus, ratione possimus voluptates rem praesentium provident non maiores. Provident!</span>
      <span>Cumque culpa distinctio facere vel doloremque corrupti a optio, voluptas id ea illo nulla dolorum impedit labore molestiae vitae, doloribus, aliquam reiciendis eligendi. Sapiente exercitationem, iure quis error iusto temporibus.</span>
      <span>Nobis voluptates quis reprehenderit sint eos libero, dolore eaque nostrum vero delectus a, maiores natus aspernatur debitis maxime fugit similique voluptatem repellendus autem nulla non doloribus. Iusto nobis voluptate ea.</span>
      <span>Quisquam placeat quos mollitia nulla est doloribus cumque facilis accusamus odio minus...

SCSS

// 스타일
.content {
  &--box {
    margin: 50px;
    padding: 30px;
    border: 1px solid;
  }
  
  &--item {
    border: 1px solid red;
  }
}
.a111 {
  display: block;
  margin: 50px;
}
strong[ui-scroll-item-float] {
  position: relative;
  top: -90px;
  display: block;
}

JavaScript

(() => {
  let direct = null;
  let index = 0;
  let rank = null;
  let initWrap = {
    box: '[ui-scroll-box]',
    item: '[ui-scroll-item]',
  }
  let initFloat = {
    boxFloat: '[ui-scroll-box-float]',
    itemFloat: '[ui-scroll-item-float]',
  }
  const initStyle = {
  	zIndex: 1000,
    position: 'fixed',
    top: 0
  }
  const util = {
    insertAfter: (referenceNode) => {
    	if(referenceNode.className.indexOf('hasClone') === -1) {
        const clone = referenceNode.cloneNode('deep');
        clone.classList.add('clone');
        referenceNode.classList.add('hasClone');
        referenceNode.parentNode.insertBefore(clone, referenceNode.nextSibling);
      }
    },
    removeAfterClone: (referenceNode) => {
    	if(referenceNode.className.indexOf('hasClone') !== -1) {
      	referenceNode.classList.remove('hasClone');
      	referenceNode.nextElementSibling.remove();
      }
    },
    returnRank: (opt, dir) => {
      const elements = util.selector(Object.values(opt).join());
      const position = util.getPosition(elements);
      const windows = window.scrollY;
      let _index = 0;
      rank = {};
      position.sort((a, b) => {
        const pa = Math.floor(a[dir] + windows);
        const pb = Math.floor(b[dir] + windows);
        if (rank[pb] === undefined) {
          rank[pb] = [elements[_index]];
        } else {
          if (rank[pb].indexOf(elements[_index]) === -1) {
            rank[pb].push(elements[_index]);
          }
        }
        if (rank[pa] === undefined) {
          rank[pa] = [elements[_index + 1]];
        } else {
          if (rank[pa].indexOf(elements[_index + 1]) === -1) {
            rank[pa].push(elements[_index + 1]);
          }
        }
        _index++;
      });
    },
    setStyle: (els) => {
      Object.keys(initStyle).map((property) => {
        for (let el of els) {
          util.insertAfter(el);
          el.style[property] = initStyle[property] + (property === 'zIndex' ? index : '');
        }
      });
...