プロセスアクションボタンの固定

kintone カスタマイズ
1

■実現したいこと
アクションボタンをスクロールしても固定したい

■発生した問題
レコード詳細画面でヘッダーを非表示にしているのですが、下にスクロールした際、アクションボタンが最上部に表示されず、違和感があるので改善したいです。

■実行したコード

(function () {
  "use strict";
  // レコード詳細画面が表示された時のイベント
  kintone.events.on('app.record.detail.show', function (event) {

    document.getElementById('header-global-navigation-root').style.height = '0px';
    document.getElementsByClassName('sc-gzjWgB gREEBW')[0].style.height = '0px';
    document.getElementsByClassName('sc-fHIGvW jnuNEX')[0].style.height = '0px';

    document.getElementsByClassName('sc-gUkKNk dQroeP__image')[0].style.display = 'none';
    document.getElementsByClassName('sc-ipMvLY ikfWGd__circle')[0].style.display = 'none';
    document.getElementsByClassName('sc-ipMvLY ikfWGd')[0].style.display = 'none';

    let fieldElement = document.getElementsByClassName('gaia-argoui-app-show-toolbar gaia-argoui-floater gaia-argoui-floater-box')[0];
    let parentRow = fieldElement.parentNode;

    parentRow.style.position = 'sticky';
    parentRow.style.top = '-20px';

    return event;

  });
})();
2

■実現したいこと修正
固定ではなく、スクロールした時は上部に消えていってほしいです

3

@KAZUHITO_SASAKI さん

こんにちは、スクロールした時に消えてほしいのであれば、

parentRow.style.position = 'sticky';

こちら消さないとスクロールしても同じ場所で固定されてしまいますね :sweat_drops:

画像とかあるとイメージつかみやすいかもしれませんね！

4

回答頂きありがとうございます。
動きとしては、やはり上部に固定したいので、stickyにして、top＝-○○pxにすることで上部に固定したいと考えていましたが、スクロールを開始するとクラス名が変化し、設定したstyle.topが適用されなくなってしまいます。
スクロールした時にjsを動かそうと思ったら、kintoneのカスタマイズでは出来ないのでしょうか。

5

結局したい事として、
スクロールをしたときに固定したいのか、固定しないで消したいのかどちらなのでしょうか？

また、スクロールを検知するJSのイベントはございますよ。
そちらを利用して動かすたびに要素をtop:〇px!important;を設定するとかですかね。(〇は変えてください。)

6

ご回答ありがとうございます。

最上部に固定することを目指しております。
現在スクロールすると中途半端な位置で固定されているので、それを解消しようと思っています。

ご紹介頂いたページを参考に試してみようと思います。

1 Like
7

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。