JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="header">헤더고정</div>
<div class="tab tab1">탭매뉴고정</div>
<div class="tab tab2">탭매뉴2고정</div>
<div class="contents content1">
  컨텐츠시작줄
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="sticky sticky1">스티키영역입니다아아아아아</div>
<div class="contents content2">
  컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
</div>
<div class="sticky sticky2">스티키영역입니다아아아아아</div>
<div class="contents content3">
  컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 컨텐츠영역입니다
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

CSS

body {
  margin: 0;
}

.header {
  z-index: 2;
  position: absolute;
  width: 100%;
  border: 1px solid red;
  background: #fff;
}

.tab {
  z-index: 2;
  position: absolute;
  width: 100%;
  border: 1px solid yellow;
  background: #fff;
}

.subTab {
  z-index: 3;
  right: 0;
  width: 100px;
  height: 100px;
  background: #fff;
}

.sticky {
  z-index: 5;
  width: 100%;
  background: red;
}

.contents {
  z-index: 1;
  width: 100%;
  color: #fff;
  background: black;
}

JavaScript

function fixedAuto() {
  var $variables = [];
  $.fn.fixedAuto = function(e) {
    this.variables = function(num) {
      var _initE = {
        idx: $variables.length,
        margintop: 0,
        follow: $variables.length - 1 < 0 ? 'first' : $variables.length - 1,
        type: 'fixed',
        fullHeight: {
          able: false,
          resize: false
        }
      };
      var _e = e !== undefined ? $.extend({}, _initE, e) : _initE;
      var $el = $(this);

      $variables.push({
        idx: _e.idx,
        margintop: _e.margintop,
        type: _e.type,
        follow: _e.follow,
        zindex: _e.zindex,
        el: $el,
        height: _e.height,
        fullHeight: {
          able: _e.fullHeight.able,
          resize: _e.fullHeight.resize
        }
      });
      return $variables;
    };

    this.sizer = function() {
      for (var i = 0; i < $variables.length; i++) {
        // console.log($variables[i].el.outerHeight());
        $variables[i]['elHeight'] = $variables[i].el.outerHeight();
        $variables[i]['elTop'] = $variables[i].margintop + ($variables[$variables[i].follow] === undefined ? 0 : $variables[$variables[i].follow].elHeight + $variables[$variables[i].follow].elTop);
      }
    };
    this.styles = function() {
      function _addStyle(i) {
        if ($variables[i].zindex !== undefined) {
          $variables[i].el.css('z-index', $variables[i].zindex);
        }
        if ($variables[i].height !== undefined) {
          $variables[i].el.css('height', $variables[i].height);
        }
      }
      for (var i = 0; i < $variables.length; i++) {
        if (!$variables[i].complete === true) {
          if ($variables[i].type === 'fixed') {
            $variables[i]['style'] = $variables[i].el.attr('style');
            $variables[i].el.css({
              position: 'fixed',
              top: $variables[i].follow === 'first' ? $variables[i].margintop : $variables[$variables[i].follow].elTop +...