ロード中の表示場所を指定したい

Question

###実現したいこと
ロード中の表示場所を指定したいです。
以下のコードのように、loadingHtmlにてクラスloadingのdivで囲いました。
そして、cssにてloadingに対し、位置をしてしているのですが、反映されません。
現在、ページの最下部に表示されてしまうのですが、最下部から少し上の中央に表示させたいです。

そもそも、loadingHtmlにてあるクラスをもったdivで囲わせ、そのクラスにcssで指定する方法が誤まっているでしょうか？

###コード

$(document).on('turbolinks:load', function() {
  $(window).on('scroll', function() {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
          $('.jscroll').jscroll({
            contentSelector: '.skill-list',
            nextSelector: 'span.next:last a',
            loadingHtml: '<div class="loading"><i class="fa fa-spinner">Now Loading...</i></div>',
            top:200
          });
    }
  });
})

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  line-height: 100px;
  font-size: 56px;
  color: #fff;
  text-align: center;
  background-color: rgba(#000,.7);
  @include border-radius(10px);
}
.loading i{
  font-size: 56px;
}

index.html.erb

<div class="main posts-index">
    <div class="container">
      <div id="items">
        <%= render 'items' %>
      </div>
    </div>
</div>

_items.html.erb

<ul class="skill-list jscroll">
  <% @posts.each do |post| %>
    <p><%= post.title %></p>
  <% end %>
  <%= paginate @posts %>
</ul>

###追記

$(document).on('turbolinks:load', function() {
  $(window).on('scroll', function() {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
          $('.jscroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<div class="loading"><i class="fa fa-spinner">Now Loading...</i></div>',
            padding: 30,
            contentSelector: '.skill-list',
            nextSelector: 'span.next:last a',
          });
    }
  });
})

###追記2
https://qiita.com/yokoto/items/c4490aed75c75dbf687a
上記サイトを参考に再度試しました。
しかし、<p class="infinite-scroll-request">読み込み中...</p>が最下部に表示されるのみで、自動スクロールの反応は得られませんでした。

$(document).on("turbolinks:load", function() {
  if ($("nav.pagination a[rel=next]").length){
    $(".jscroll").infiniteScroll({
      path: "nav.pagination a[rel=next]",
      append: ".jscroll ul",
      elementScroll: true,
      history: true,
      prefill: false,
      status: ".page-load-status",
      hideNav: ".pagination"
    })

<ul class="skill-list jscroll">
  <% @posts.each do |post| %>
    <p><%= post.title %></p>
  <% end %>
  <%= paginate @posts %>
</ul>
<div class="page-load-status">
  <p class="infinite-scroll-request">読み込み中...</p>
</div>

Answer 1

ぼくのように英語が苦手な人の実装作業の流れ

---

①Qiitaなどの記事をみて実装する
↓　だめな場合
②他の記事をみて実装する
↓　だめな場合
③公式を見る。（だいたい解決する）
↓　だめな場合
④StackOverflow・StackExchangeを見る。

①〜②ではバージョンアップで実装方法が変わっていたりするためうまくいかないことがあります。
また③の公式を見るときはQ＆A、Githubならissueまで見るとより良いかと思います。

---

前置きが長くなりましたが下記でいかがでしょうか？
jscroll公式：Padding

Comments

[tomtom1]

ご回答ありがとうございます！paddingを追加していたのですが、反応が得られなかったため、topに変更したりと試してました！
公式を見る限り、This only applies when autoTrigger is set to true.がありましたので、加えましたが、まだ思うような反応が得られずにおります。取り急ぎ現在のコードを追記しました。

[no1knows]

https://qiita.com/s_yasunaga/items/ab17424912ee90f853d7
https://idotdesign.net/blog/web/js/endless-scroll-jscroll/

実装したことないのでそれを前提に・・・
上記ブログも公式もonloadは利用していないので、ひとまずシンプルに$(window).on('scroll', function() {をなくして、$(function() {$('.jscroll').jscroll({だけで実装してみるとどうなりますか？

[tomtom1]

$(document).on('turbolinks:load', function() {
$(function {
$('.jscroll').jscroll({
autoTrigger: true,
loadingHtml: '<div class="loading"><i class="fa fa-spinner">Now Loading...</i></div>',
padding: 30,
contentSelector: '.skill-list',
nextSelector: 'span.next:last a',
});
}
});
})

[tomtom1]

実装したことがないにも関わらずアドバイスありがとうございます。
⇧こういうことでしょうか？
そのようにすると、jscoll自体の反応が得られず、ページ更新なりません。

[no1knows]

お手間を取らせて申し訳ないです。
下記リンクで実装している例があるようなので一度やってみてはいかがでしょうか？
https://qiita.com/yokoto/items/c4490aed75c75dbf687a
また反応が得られないの場合、Chromeのconsoleにエラーは出ていないでしょうか？

[退会済みユーザー]

stackexchange もわすれないであげて（ｗ
https://stackexchange.com/

[退会済みユーザー]

大体は overflow の検索結果がでてくることが多いがそれ以外のQAサイトのも含まれるから

[no1knows]

StackExchangeも（念のため）追加しました。

[tomtom1]

no1knowsさん
ありがとうございます！！ようやく解決しました！！
先ほどお教え頂いたサイトを試した結果は追記2に記入しました。

loadingHtmlにてクラスloadingのdivで囲い、.loadingに対し、cssで位置を支持する方法ですが、別アプリのcssに記入していたことにより位置が変わらなかたという初歩中の初歩の誤りでした。こんなに時間を使ってしまい自分に呆れました。
また、autoTrigger: true,を追加し、paddingに数値を入れるということも試しに行ったのですが、私のコード上では反応が位置は変わりませんでした。なぜだろう..。
改めて、お時間をさいてくださりありがとうございます！

[no1knows]

なにはともあれ解決して良かったです。
将来同じようなことで困った方のためになるので追記ありがとうございます！