L'OCOREoffice edition

値札・伝票 アイテムコード

HTML

<h3 class="first mb1">値札・伝票 アイテムコード</h3>
<div class="col-5 category-menu">
  <div class="cols category-menu-id">ID</div>
  <div class="cols category-menu-name">カテゴリ</div>
  <div class="cols">品名</div>
  <div class="cols">コード</div>
  <div class="cols">コード（セール）</div>
</div>
<div class="category-list-contents">

	<div class="pushpin-head">
	  <h3 class="js-toggle-pushpin pushpin-title">
		アパレル（洋服）
		<i class="fe fe-chevron-down"></i>
	  </h3>
	  <div class="js-toggle-contents-pushpin category-contents-pushpin">
		<div>
		  <div class="col-5">
			<div class="cols category-menu-id">1</div>
			<div class="cols category-menu-name">4_knit_l：ニット・セーター</div>
			<div class="cols">
			  <input type="text" name="itemName" value="" />
			</div>
			<div class="cols">
			  <input type="text" name="itemCode" value="" />
			</div>
			<div class="cols">
			  <input type="text" name="saleItemCode" value="" />
			</div>
		  </div>
		</div>
		<div>
		  <div class="col-5">
			<div class="cols category-menu-id">2</div>
			<div class="cols category-menu-name">4_tee_l：Tシャツ・カットソー</div>
			<div class="cols">
			  <input type="text" name="itemName" value="" />
			</div>
			<div class="cols">
			  <input type="text" name="itemCode" value="" />
			</div>
			<div class="cols">
			  <input type="text" name="saleItemCode" value="" />
			</div>
		  </div>
		</div>
	  </div>
	</div>
</div>

js

function CategoryList() {
  $(".pushpin-head").each(function() {
    var el = $(this),
        offset = el.offset(),
        s = $(window).scrollTop() + 105,
        tt = $(".pushpin-title", this),
        f = $(".pushpin-floating", this);
      if ((s > offset.top) && (s < offset.top + el.height())) {
        tt.css({
            'z-index':99
        });
        f.css({
            "visibility": "visible"
        });
      } else {
        tt.css({
            'z-index':120
        });
        f.css({
            "visibility": "hidden"
        });
      };
  });
}


$(function() {
var clone; // カテゴリ見出しのFIX様クローンを作成
var cloneMenu; // 見出しのFIX様クローンを作成
  $(".pushpin-head").each(function() {
      clone = $(".pushpin-title", this);
      clone.before(clone.clone()).css("width", clone.width()).addClass("pushpin-floating");
  });
	$(".category-menu").each(function() {
      cloneMenu = $(this);
      cloneMenu.before(cloneMenu.clone()).css("width", cloneMenu.width()).addClass("pushpin-floating");
  });
  $(window).scroll(CategoryList).trigger("scroll");
	$(window).scroll(CategoryMenu).trigger("scroll");
});
//カテゴリ見出しクリックでトグル
$(document).on('click','.js-toggle-pushpin',function(){
	$(this).stop().toggleClass('isOpen');
	$(this).next('.pushpin-floating').toggleClass('isOpen');
	$(this).prev('.js-toggle-pushpin').toggleClass('isOpen');
	$target = $(this).nextAll('.js-toggle-contents-pushpin');
	$target.stop().slideToggle();
});


//初回読み込みとウィンドウリサイズ時にfixしているタイトルの横幅を再計算する
function resizePushpin() {
    $('.contents').width();
    $('.pushpin-floating').css("width",  $('.contents').width());
}

$(window).on('load resize', function() {
	resizePushpin();
});

//各セクションに連番のクラスをふる?
$('.col-5').each(function(i){
	console.log(i);
	$(this).addClass('index-'+ i);
});

//開閉の見出しをクリックしたら固定位置にスクロール
$(document).on('click','.js-toggle-pushpin.pushpin-title.pushpin-floating', function(){
var titleTopOffset =$(this).prev('.js-toggle-pushpin.pushpin-title').offset().top - 105;
$("html,body").animate({scrollTop:titleTopOffset});
});