# 一覧画面の列固定をすると、スクロールした列の内容が透けて見える

**URL:** <https://community.cybozu.dev/t/topic/5504>\
**Category:** kintone 開発相談\
**Created:** [2021 年 11 月 30 日午前 4:11 UTC](https://community.cybozu.dev/t/topic/5504 "2021-11-30T04:11:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account409](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@Legacy\_Account409](https://community.cybozu.dev/u/Legacy_Account409)\
**Post date:** [2021 年 11 月 30 日午前 4:11 UTC](https://community.cybozu.dev/t/topic/5504/1 "2021-11-30T04:11:01Z")

</div>

一覧画面の列固定を試みたところ、列固定自体はうまくいったのですが、固定した列の裏に、スクロールした列の内容が透けて見えてしまう事象が起きています。

現在、CSSで列固定、javascriptで行の色変更をしていますが、コードを修正することで解消することは可能でしょうか。

【CSS（列固定）】

```
.recordlist-row-gaia>td:nth-child(1),.recordlist-header-cell-gaia:nth-child(1){ position: sticky; left: 0px; width: 50px !important; }
.recordlist-row-gaia>td:nth-child(2),.recordlist-header-cell-gaia:nth-child(2){ position: sticky; left: 50px; width: 117px !important; }
.recordlist-row-gaia>td:nth-child(3),.recordlist-header-cell-gaia:nth-child(3){ position: sticky; left: 167px; width: 237px !important; }
.recordlist-row-gaia>td:nth-child(4),.recordlist-header-cell-gaia:nth-child(4){ position: sticky; left: 404px; width: 117px !important; }
.recordlist-row-gaia>td:nth-child(5),.recordlist-header-cell-gaia:nth-child(5){ position: sticky; left: 521px; width: 314px !important; }
.recordlist-row-gaia>td:nth-child(6),.recordlist-header-cell-gaia:nth-child(6){ position: sticky; left: 835px; width: 180px !important; }

.recordlist-header-cell-gaia:nth-child(1){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(2){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(3){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(4){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(5){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(6){ z-index:1; }

```

【javascript（行の色変更）】

```
(function() {
 "use strict";

kintone.events.on('app.record.index.show', function(event) {
 var bgColor
 var elStatus = kintone.app.getFieldElements('完了状況');

 for (var i = 0; i < elStatus.length; i++) {
  var record = event.records[i];

  switch (record['完了状況']['value']) {
   case "完了":
    bgColor = '#ffd900';
    break;
   case "失注":
    bgColor = '#adadad';
    break;
   default:
    bgColor = '#fff8dc';
    break;
   }
  elStatus[i].parentNode.style.backgroundColor = bgColor;
  }
 });
})();

```

詳しい方、ご教授いただければ幸いです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account409](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@Legacy\_Account409](https://community.cybozu.dev/u/Legacy_Account409)\
**Post date:** [2021 年 12 月 1 日午前 2:30 UTC](https://community.cybozu.dev/t/topic/5504/2 "2021-12-01T02:30:57Z")

</div>

具体的には以下のようになります。

上が通常時で、下がスクロール後です。