autoSticky

by uiwwnw

HTML

<header>헤더헤더</header>
<footer>
  <button class="pageBtn">페이지버튼1</button>
</footer>
<div class="container">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, dolore? Reiciendis temporibus porro modi!
  </p>
  <div class="gnbMenu">
    <ul>
      <li>case A</li>
      <li>case B</li>
      <li>case C</li>
      <li>case D</li>
    </ul>
  </div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, unde repudiandae. In quos sapiente culpa placeat unde, excepturi molestias inventore aut eum molestiae amet architecto ut eos, debitis officiis nemo. Alias neque quibusdam nesciunt officia
    reiciendis deleniti quo odit nemo veritatis nostrum pariatur cupiditate maiores, fugiat recusandae laudantium aliquam. Suscipit officia mollitia ad, rem modi amet saepe maiores ab repudiandae! Ducimus, alias. Sequi quaerat nulla repudiandae facere
    officiis temporibus, atque laborum excepturi eaque optio perferendis non vitae incidunt, sapiente velit aspernatur corrupti iste rem deleniti quae laboriosam in reprehenderit ipsa. Aliquam, dolore debitis vitae, recusandae molestiae itaque odit temporibus
    cupiditate quisquam culpa dicta cum! Inventore fugit quis illo omnis dolores, sit soluta voluptate eligendi exercitationem non nemo tempora accusamus commodi. Quibusdam voluptatibus at excepturi totam soluta quis labore eaque delectus culpa perspiciatis,
    ad dolores exercitationem cupiditate asperiores eum dignissimos hic vero rem quidem? Sit, dolorem consequuntur reprehenderit fuga iusto nostrum. Consectetur repellendus modi maxime iste tempora sapiente sint corporis nam facilis id. Modi provident
    ducimus libero laborum nemo dignissimos nihil maxime rem nulla. Quae, quo vel neque porro iste ipsa. Obcaecati in dicta, blanditiis voluptates tenetur tempore facilis numquam. Quo veritatis similique aperiam porro expedita nemo, pariatur consequatur
    sint ex hic illum sapiente ullam quas vitae et vero fuga atque. Eaque harum...

CSS

body {
  margin: 0;
}

.sticky {
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

header {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  background: #000;
}

.gnbMenu ul {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #000;
  background: #fff;
}

.gnbMenu li {
  display: table-cell;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

nav {
  width: 100px;
  border: 1px solid red;
  background: #eee;
}

.pageBtn {
  width: 100%;
  color: #fff;
  background: red;
}

.bottomType {
  z-index: 2;
  position: fixed;
  bottom: 0;
}

JavaScript

;
(function() {
  var root = this;
  var utils = (function() {
    var addEvnt = function(el, m, fn) {
      el.addEventListener(m, fn);
    };
    var removeEvnt = function(el, m, fn) {
      el.removeEventListener(m, fn);
    };
    var ctr = function(elemList, i, option) {
      var ctr = {
        el: elemList[i],
        top: option.bottom ? elemList[i].offsetTop - window.innerHeight + elemList[i].offsetHeight : elemList[i].offsetTop,
        margin: elemList[i - 1] === undefined ? 0 : Number(elemList[i - 1].getAttribute('data-margin')) + Number(elemList[i - 1].offsetHeight),
        clone: elemList[i].cloneNode(true)
      };
      ctr.margin = option.bottom ? -ctr.margin : ctr.margin;
      return ctr;
    };
    var scroll = function(scr) {
      scr.top = window.pageYOffset || document.documentElement.scrollTop;
      scr.direct = scr.top > scr.exTop;
      return scr;
    };
    var opt = function(e) {
      var opt = {
        activeClassName: 'sticky'
      };
      opt = Object.assign(opt, e);
      return opt;
    };
    var initElem = function(e) {
      var elemNode = e;
      var elemList = document.querySelectorAll(elemNode).length === 0 ? false : document.querySelectorAll(elemNode);
      return elemList;
    };
    var addElem = function(elemNode, e) {
      var elemNode = elemNode + ', ' + e;
      var elemList = document.querySelectorAll(elemNode).length === 0 ? false : document.querySelectorAll(elemNode);
      return elemList;
    };
    var removeElem = function(elemNode, e) {
      var elemNode = elemNode.replace(e, '');
      var elemList = document.querySelectorAll(elemNode).length === 0 ? false : document.querySelectorAll(elemNode);
      return elemList;
    };
    return {
      initElem: initElem,
      addElem: addElem,
      removeElem: removeElem,
      addEvnt: addEvnt,
      removeEvnt: removeEvnt,
      ctr: ctr,
      scroll: scroll,
      opt: opt
    }
  }());
  var auSticky = function(e, opt) {
    auSticky.idx =...