スクロールするたびにスティッキーヘッダーがガタガタしてしますのを直したい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
 <main>

 </main>
  <footer>
    <ul>
      <li>aa</li>
      <li>aa</li>
      <li>aa</li>
      <li>aa</li>
    </ul>
  </footer>



  <script>
    'use strict';
    $(function() {
      $(window).on('scroll', function() {
        if ($(window).scrollTop() > $('ul').offset().top) {
          $('ul').addClass('a');
        } else {
          $('ul').removeClass('a');
        }
      });
    });
  </script>

ul.a {
  background: red;
  position: fixed;
  top: 0;
  width: 100%;

}

main {
  background: #333;
  width: 100%;
  height: 2000px;

}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[miyabi_pudding]

何点か。

・どこにstickyを効かせているのでしょうか？
fixedしかお見受けできません。
・質問はタイトルだけでなく、本文に詳細な内容を記載ください。
・ブラウザは何か記載してください。
・コードは他人でも再現できるコードにしてください。

質問本文は、編集可能なので、
この質問にて修正をお願いします。

[退会済みユーザー]

スクロールするたびに固定したヘッダーの挙動がおかしくなりガタガタとブレてしまいます。
それを直したいのですが、やり方がわからず困っています。

スティッキーではなく固定ヘッダーです。
ブラウザはGoogleCroomです。

[miyabi_pudding]

わかりました。
スティッキーヘッダーだと、やりたいことを勘違いされるかもなので、
(position: sticky使えばいいじゃんって思われる)タイトル変えた方がいいかもですね。
ちなみに、position: stickyを使わない理由はなんでしょうか？
クロスブラウジングを考慮して、ということでしょうか？
（それによって回答変わります）

[退会済みユーザー]

以後気をつけます。

jqueryでの実装方法を勉強したいからです。
もしよろしければ教えていただきたく思います。

[miyabi_pudding]

なるほど！
学習のためってわけですね。
御助力できるかわかりませんが、回答させていただきますね。

[miyabi_pudding]

あと、質問は編集できるので、以後ではなく、この質問から気をつけましょう。
ちなみに、javadocは、Javaによるものなので、この質問での適切なタグは、
JavaScript、jQueryだと思われます。
タグも、質問編集で変えれますので、変えときましょう。

Answer 1

position: fixed時に、$('ul').offset().topが0になるのが原因です。
なので、初期値のoffset.topを予め定義し、それを条件に使うといいでしょう。
また、クラスを持っている時にremoveClass、持っていなかったらaddClassさせるという条件も一応つけときました。

'use strict';

$(function() {
  // 最初に初期のoffsetを取得しておく
  const ulOffset = $('ul').offset().top;


  $(window).on('scroll', function() {
    // この条件が、スクロール量が多いのにfalseになる時がある
    console.log('top: ', $(window).scrollTop() > $('ul').offset().top);
    // position: fixedによって、offset.topが変化してしまうため、
    // removeClassの方が実行される。(ページ上にいるので、offset.topが0になるから)
    // よって、最初に取得した、初期値のoffset.topを使えばうまくいく
    if ($(window).scrollTop() > ulOffset && !$('ul').hasClass('a')) {
      // クラスを持っていない時に追加、とする
      $('ul').addClass('a');
    } else if ($('ul').hasClass('a') && ulOffset > $(window).scrollTop()) {
      // また、クラスを持っていたら実行する、とする
      $('ul').removeClass('a');
    }
  });
});

Comments

[退会済みユーザー]

ありがとうございます。
指摘いただいた点も変更しておきました。